[mw_shl_code=css, sant] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; polstring: 0; }
.container{ width:750px; høyde: 200 px; margin: 30 px auto; Overflow: skjult; Bakgrunn: #000; Posisjon: Relativ; }
.eyesBoxs{width:130px; høyde: 70 px; Posisjon: absolutt; topp: 50 px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
bredde: 130px;
høyde: 70 px;
Bakgrunn: #fff;
Posisjon: absolutt;
topp: 0;
venstre:0;
Overflow: skjult;
border-radius: 0 70px 0 50px;
}
.shadow{
display:blokk;
bredde: 130px;
høyde: 70 px;
Posisjon: absolutt;
topp: 0;
z-indeks: 5;
grenseradius: 0 90px 0 60px;
boks-skygge: 5px 12px 2px 5px rgba(0,0,0,.25) innfelt;
}
.skewLeft{
transform: skewX (15°);
-webkit-transform:skewX(15°);
-o-transform:skewX(15°);
}
.skewRight{
transformasjon: skewX(-15°) skala(-1,1);
-webkit-transform: skewX(-15°) skala(-1,1);
-o-transform: skewX(-15°) skala(-1,1);
}
.basic{
bredde: 60px;
høyde: 60px;
Bakgrunn: #000;
Posisjon: absolutt;
topp: 50 %;
venstre: 50 %;
Z-indeks: 10;
margin-topp: -30 px;
grenseradius: 60 %;
}
.basic:før{
innhold:"";
display:blokk;
bredde: 10 px;
høyde: 11 px;
Posisjon: absolutt;
venstre: 15px;
topp: 15 px;
Z-indeks: 100;
grenseradius: 60 %;
bakgrunnsbilde: radial-gradient(sirkel,RGB(225,225,225),RGB(225,225,225),RGBA(225,225,225,0.9),RGBA(225,225,0.3));
-webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,0.3));
-o-bakgrunnsbilde:radial-gradient(sirkel,rgb(225,225,225),RGB(225,225,225),rgba(225,225,225,0.9),rgba(225,225,0.3));
}
.pullLeft .basic{
margin-venstre:-33px;
}
.pullRight .basic{
margin-venstre:-27px;
}
.eyes{
Bredde: 55 px;
høyde: 55 px;
Bakgrunn: #ff0000;
Posisjon: absolutt;
topp: 8 px;
grenseradius: 60 %;
box-shadow:0 0 2px 4px #bd0000 innfelt,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
bredde: 64 %;
høyde: 64 %;
Bakgrunn: #ff0000;
Posisjon: absolutt;
riktig:0;
venstre:0;
topp: 10 px;
margin:0 auto;
grenseradius: 60 %;
box-shadow:0 0 2px 0 #b20000 innfelt;
}
.eyes .line:before{
innhold:"";
display:blokk;
bredde: 10 px;
høyde: 11 px;
Posisjon: absolutt;
venstre: 3 px;
topp: 4px;
Z-indeks: 100;
grenseradius: 60 %;
bakgrunnsbilde: radial-gradient(sirkel,RGB(225,225,225),RGB(225,225,225),RGBA(225,225,0.7),RGBA(225,225,0.3));
-webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,0.3));
-o-bakgrunnsbilde:radial-gradient(sirkel,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,0.3));
}
.eyes .line:after{
innhold:"";
display:blokk;
bredde: 10 px;
høyde: 10 px;
Posisjon: absolutt;
Bakgrunn: #000;
riktig:0;
venstre:-1px;
topp: 13 px;
Z-indeks: 100;
margin:0 auto;
grenseradius: 60 %;
transformere: rotere (150 grader);
-webkit-transform:rotate(150°);
-o-transform:rotasjon (150 grader);
Animasjon: Colour 20s Easy-in Infinite;
-webkit-animasjon: farge 20s lettinnføring uendelig;
-O-Animasjon: Farge 20s Lett-innføring i Uendelig;
}
@keyframes farge{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{bakgrunn:#f00; }
}
@-webkit-keyframes colour{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{bakgrunn:#f00; }
}
@-o-keyframes colour{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{bakgrunn:#f00; }
}
/*******三勾玉 开始*******/
.hook{
bredde: 92 %;
høyde: 92 %;
Posisjon: absolutt;
riktig:0;
venstre:0;
topp: 5%;
margin:0 auto;
grenseradius: 60 %;
}
.hook .bar{
display:blokk;
bredde: 100 %;
høyde: 100 %;
Posisjon: absolutt;
venstre:0;
topp: 0;
grenseradius: 60 %;
}
.hook .bar b{
display:blokk;
bredde: 8 px;
høyde: 8 px;
Bakgrunn: #000;
Posisjon: absolutt;
venstre:0;
bunn:0;
grenseradius: 60 %;
}
.hook .bar b:etter{
innhold:"";
bredde: 8 px;
høyde: 8 px;
kantfarge: gjennomsiktig gjennomsiktig #000 gjennomsiktig;
Kant-stil: ensfarget;
border-width:0 0 5px 0;
Posisjon: absolutt;
topp:-1px;
venstre: -3 px;
Z-indeks: 100;
grenseradius: 0 0 0 70 %;
transformer: rotere (-75 grader);
-webkit-transform:rotate(-75°);
-o-transform:rotate(-75°);
}
.hook .bar:nth-child(1){
transformere: rotere (10 grader);
-webkit-transform:rotate(10°);
-o-transform:rotate(10°);
}
.hook .bar:nth-child(2){
transformere: rotere (130 grader);
-webkit-transform:rotate(130°);
-o-transform:rotere(130°);
}
.hook .bar:nth-child(3){
transformer: rotere (250 grader);
-webkit-transform:rotate (250°);
-o-transform:rotere(250°);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
bredde: 93 %;
høyde: 93 %;
Posisjon: absolutt;
riktig:0;
venstre:0px;
topp: 2 px;
margin:0 auto;
Bakgrunn: #000;
grenseradius: 60 %;
}
.tube .bar{
display:blokk;
bredde: 10 px;
høyde: 20 px;
Kant-stil: ensfarget;
kantbredde: 0 0 0 10px;
kantfarge: gjennomsiktig, gjennomsiktig, gjennomsiktig svart;
Posisjon: absolutt;
grense-radius: 100% 0 0 0;
}
.tube .bar:nth-child(1){
topp:-10px;
venstre: 2 px;
transformere: rotere (-10 grader);
}
.tube .bar:nth-child(2){
bunn:0px;
Høyre:-10px;
transformer: rotere (105 grader);
-webkit-transform:rotate(105°);
-o-transform: roter (105 grader);
}
.tube .bar:nth-child(3){
bunn: -3 px;
venstre: -10px;
transformere: rotere (235 grader);
-webkit-transform:rotate(235°);
-o-transform:rotere (235°);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
bredde: 130px;
høyde: 70 px;
Posisjon: absolutt;
Overflow: skjult;
topp: 0;
venstre:0;
border-radius: 0 70px 0 50px;
}
.trans .bar{
display:blokk;
bredde: 9 px;
høyde: 9 px;
Bakgrunn: #000;
Posisjon: absolutt;
topp: 50 %;
z-indeks: 2;
margin: -4px 0 0 -4px;
grenseradius: 60 %;
}
.trans .bar:after{
innhold:"";
display:blokk;
bredde: 11 px;
høyde: 12 px;
Posisjon: absolutt;
topp: -13 px;
venstre: -13 px;
Z-indeks: 100;
grenseradius: 60 %;
bakgrunn: RGBA (250 250 250 0,85);
}
.pullLeft .trans .bar{
transformasjon: skjev X (-15 grader);
-webkit-transform:skewX(-15°);
-o-transform:skewX(-15°);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
transformasjon: skewX(-15°) skala(-1,1);
-webkit-transform: skewX(-15°) skala(-1,1);
-o-transform: skewX(-15°) skala(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-narrow{
Animasjon: Ani-smal 20-talls Ease-out Infinite;
-webkit-animation:ani-smal 20-talls letthet ut uendelig;
-o-animasjon: ani-smal 20-talls letthet uendelig;
}
@keyframes ani-smal{
0%{opasitet:1; transformasjon: skala(1); }
5%{opasitet:1; transformasjon: skala(1); }
10%{opasitet:0; transformasjon: skala(0); }
87%{opasitet:0; transformasjon: skala(0); }
90%{opasitet:1; transformasjon: skala(1); }
100%{opasitet:1; transformasjon: skala(1); }
}
@-webkit-keyframes ani-narrow{
0%{opasitet:1; -webkit-transform:skala(1); }
5%{opasitet:1; -webkit-transform:skala(1); }
10%{opasitet:0; -webkit-transform:skala(0); }
87%{opasitet:0; -webkit-transform:skala(0); }
90%{opasitet:1; -webkit-transform:skala(1); }
100%{opasitet:1; -webkit-transform:skala(1); }
}
@-o-keyframes ani-narrow{
0%{opasitet:1; -o-transform: skala(1); }
5%{opasitet:1; -o-transform: skala(1); }
10%{opasitet:0; -o-transform:skala(0); }
87%{opasitet:0; -o-transform:skala(0); }
90%{opasitet:1; -o-transform: skala(1); }
100%{opasitet:1; -o-transform: skala(1); }
}
.ani-zoom{
animasjon: ani-zoom 20s lineær uendelig;
-webkit-animation: ani-zoom 20s lineær uendelig;
-o-animasjon: ani-zoom 20-talers lineær uendelig;
}
@keyframes ani-zoom{
0%{opasitet:0; transformasjon: skala(0); }
5%{opasitet:0; transformasjon: skala(0); }
8%{opasitet:1; transformasjon: skala(1); }
60%{opasitet:1; transformasjon: skala(1); }
62%{opasitet:0; transformasjon: skala (1,5); }
100%{opasitet:0; transformasjon: skala(0); }
}
@-webkit-keyframes ani-zoom{
0%{opasitet:0; -webkit-transform:skala(0); }
5%{opasitet:0; -webkit-transform:skala(0); }
8%{opasitet:1; -webkit-transform:skala(1); }
60%{opasitet:1; -webkit-transform:skala(1); }
62%{opasitet:0; -webkit-transform:skala(1,5); }
100%{opasitet:0; -webkit-transform:skala(0); }
}
@-o-keyframes ani-zoom{
0%{opasitet:0; -o-transform:skala(0); }
5%{opasitet:0; -o-transform:skala(0); }
8%{opasitet:1; -o-transform: skala(1); }
60%{opasitet:1; -o-transform: skala(1); }
62%{opasitet:0; -o-transform:skala(1,5); }
100%{opasitet:0; -o-transform:skala(0); }
}
.ani-rotateHook{
animasjon: ani-rotateKrok 20s lett-inn uendelig;
-webkit-animation:ani-rotateHook 20s lett-inn infinite;
-o-animasjon:ani-rotateKrok 20s lett-inn uendelig;
}
@keyframes ani-rotateHook{
0%{opasitet:0; transform: skala(0) rotere(0); }
9%{opasitet:0; transform: skala(0) rotere(0); }
13%{opasitet:1; transformere: skala(1) rotere (-360 grader); }
35%{opasitet:1; transformere: skala(1) rotere (-360 grader); }
38%{opasitet:0; transformer: skala (1,8) rotere (-540 grader); }
100%{opasitet:0; transform: skala(0) rotere(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{opasitet:0; -webkit-transform:skala(0) rotere(0); }
9%{opasitet:0; -webkit-transform:skala(0) rotere(0); }
13%{opasitet:1; -webkit-transform:skala(1) roter(-360 grader); }
35%{opasitet:1; -webkit-transform:skala(1) roter(-360 grader); }
38%{opasitet:0; -webkit-transform:skala(1,8) roter(-540°); }
100%{opasitet:0; -webkit-transform:skala(0) rotere(0); }
}
@-o-keyframes ani-rotateHook{
0%{opasitet:0; -o-transform: skala(0) roter(0); }
9%{opasitet:0; -o-transform: skala(0) roter(0); }
13%{opasitet:1; -o-transform: skala(1) roter(-360 grader); }
35%{opasitet:1; -o-transform: skala(1) roter(-360 grader); }
38%{opasitet:0; -o-transform: skala(1,8) roter (-540 grader); }
100%{opasitet:0; -o-transform: skala(0) roter(0); }
}
.ani-rotateTube{
animasjon: ani-rotateTube 20s ease-in-out infinite;
-webkit-animation: ani-rotateTube 20s ease-in-out infinite;
-o-animasjon: ani-rotate Tube 20s lett-inn-ut uendelig;
}
@keyframes ani-rotateTube{
0%{opasitet:0; transform: skala(0) rotere(0); }
35%{opasitet:0; transform: skala(0) rotere(0); }
40%{opasitet:1; transformere: skala(1) rotere (-360 grader); }
60%{opasitet:1; transformere: skala(1) rotere (-360 grader); }
100%{opasitet:1; transformere: skala(1) rotere (-360 grader); }
}
@-webkit-keyframes ani-rotateTube{
0%{opasitet:0; -webkit-transform:skala(0) rotere(0); }
35%{opasitet:0; -webkit-transform:skala(0) rotere(0); }
40%{opasitet:1; -webkit-transform:skala(1) roter(-360 grader); }
60%{opasitet:1; -webkit-transform:skala(1) roter(-360 grader); }
100%{opasitet:1; -webkit-transform:skala(1) roter(-360 grader); }
}
@-o-keyframes ani-rotateTube{
0%{opasitet:0; -o-transform: skala(0) roter(0); }
35%{opasitet:0; -o-transform: skala(0) roter(0); }
40%{opasitet:1; -o-transform: skala(1) roter(-360 grader); }
60%{opasitet:1; -o-transform: skala(1) roter(-360 grader); }
100%{opasitet:1; -o-transform: skala(1) roter(-360 grader); }
}
.ani-shadow{
animasjon: ani-shadow 20-talls lineær uendelig;
-webkit-animasjon: ani-shadow 20-talls lineær uendelig;
-o-animasjon: ani-skygge 20-talers lineær uendelig;
}
@keyframes ani-shadow{
0%{opasitet:0; box-shadow: ingen; }
58%{opasitet:0; box-shadow: ingen; }
64%{opasitet:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
87%{opasitet:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
90%{opasitet:0; box-shadow: ingen; }
100%{opasitet:0; box-shadow: ingen; }
}
@-webkit-keyframes ani-shadow{
0%{opasitet:0; box-shadow: ingen; }
58%{opasitet:0; box-shadow: ingen; }
64%{opasitet:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
87%{opasitet:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
90%{opasitet:0; box-shadow: ingen; }
100%{opasitet:0; box-shadow: ingen; }
}
@-o-keyframes ani-shadow{
0%{opasitet:0; box-shadow: ingen; }
58%{opasitet:0; box-shadow: ingen; }
64%{opasitet:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
87%{opasitet:1; box-shadow:0 0 0 14px #464646,0 0 0 16px #000,0 0 0 30px #6c6c6c,0 0 0 32px #000,0 0 0 44px #a6a6a6,0 0 0 46px #000; }
90%{opasitet:0; box-shadow: ingen; }
100%{opasitet:0; box-shadow: ingen; }
}
.ani-smal, .ani-zoom,.ani-roterHook,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
animasjon-fyll-modus: fremover;
-webkit-animation-fill-mode: begge;
-o-animasjon-fyll-modus: begge;
}
</style>
</head>
<body>
<div class="container">
<!-- venstre øye begynner - >
<div class="eyesBoxs pullLeft">
<div class="profile skewLeft"></div>
<div class="shadow skewleft"></div>
<divklasse="grunnleggende ani-smal"></div>
<div class="eyes ani-zoom">
<div class="line">
<divklasse="hook ani-rotateHook">
<spenn klasse="bar"><b></b></span>
<spenn klasse="bar"><b></b></span>
<spenn klasse="bar"><b></b></span>
</div>
<div class="tube ani-rotateTube">
<spenn klasse="bar"></span>
<spenn klasse="bar"></span>
<spenn klasse="bar"></span>
</div>
</div>
</div>
<div class="trans skewLeft">
<spenn klassen="bortsett fra ani-skygge"></span>
</div>
</div>
<!-- enden av venstre øye - >
<!-- høyre øye begynner – >
<div class="eyesBoxs pullRight">
<div class="profile skewRight"></div>
<div class="shadow skewRight"></div>
<divklasse="grunnleggende ani-smal"></div>
<div class="eyes ani-zoom">
<div class="line">
<divklasse="hook ani-rotateHook">
<spenn klasse="bar"><b></b></span>
<spenn klasse="bar"><b></b></span>
<spenn klasse="bar"><b></b></span>
</div>
<div class="tube ani-rotateTube">
<spenn klasse="bar"></span>
<spenn klasse="bar"></span>
<spenn klasse="bar"></span>
</div>
</div>
</div>
<div class="trans skewRight">
<spenn klassen="bortsett fra ani-skygge"></span>
</div>
</div>
<!-- høyre øye ender - >
</div>
</body>
[/</html>mw_shl_code]
|
Publisert på 14.11.2014 17:55:02
|
|
|
|
Vert|
Publisert på 14.11.2014 17:57:04
|
Publisert på 14.11.2014 17:58:15
|
