[mw_shl_code=css,true] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; polsterējums:0; }
.container{ platums:750px; augstums:200px; margin:30px auto; pārplūde:slēpts; fons:#000; amats: relatīvs; }
.eyesBoxes{platums:130px; augstums:70px; pozīcija: absolūta; augšējā daļa: 50 pikseļi; }
.pullLeft{pa kreisi:100px; }
.pullRight{pa labi:100px; }
.profils{
platums:130px;
augstums:70px;
fons:#fff;
pozīcija: absolūta;
top:0;
pa kreisi:0;
pārplūde:slēpts;
robežas rādiuss:0 70px 0 50px;
}
.ēna{
displejs:bloks;
platums:130px;
augstums:70px;
pozīcija: absolūta;
top:0;
z-indekss:5;
robežas rādiuss:0 90px 0 60px;
kastes ēna:5px 12px 2px 5px rgba(0,0,0,.25) ieliktnis;
}
.skewLeft{
transform:skewX(15 grādi);
-webkit-transform:skewX(15 grādi);
-o-transform:skewX(15 grādi);
}
.skewRight{
transform:skewX(-15grādi) skala(-1,1);
-webkit-transform:skewX(-15grādi) skala(-1,1);
-o-transform:skewX(-15grādi) skala(-1,1);
}
.basic{
platums:60px;
augstums:60px;
fons:#000;
pozīcija: absolūta;
top:50%;
pa kreisi:50%;
z-indekss:10;
margin-top:-30px;
robežas rādiuss:60%;
}
.basic:pirms{
saturs:"";
displejs:bloks;
platums:10px;
augstums:11px;
pozīcija: absolūta;
pa kreisi:15px;
augšā: 15 pikseļi;
z-indekss:100;
robežas rādiuss:60%;
fona attēls:radiālais gradients(aplis,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
-webkit-background-image:radiālais gradients(aplis,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
-o-fona attēls:radiālais gradients(aplis,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
}
.pullLeft .basic{
piemale pa kreisi:-33px;
}
.pullRight .basic{
piemale pa kreisi:-27px;
}
.acis{
platums:55px;
augstums:55px;
fons:#ff0000;
pozīcija: absolūta;
augšējā daļa: 8 pikseļi;
robežas rādiuss:60%;
kastes ēna:0 0 2px 4px #bd0000 ieliktnis,0 0 0 2px #000;
}
.pullLeft .eyes{pa kreisi:35px; }
.pullRight .acis{pa labi:35px; }
.acis .line{
platums:64%;
augstums:64%;
fons:#ff0000;
pozīcija: absolūta;
pa labi:0;
pa kreisi:0;
augšējā daļa: 10 pikseļi;
margin:0 auto;
robežas rādiuss:60%;
kastes ēna:0 0 2px 0 #b20000 ieliktnis;
}
.eyes .line:pirms{
saturs:"";
displejs:bloks;
platums:10px;
augstums:11px;
pozīcija: absolūta;
pa kreisi:3px;
augšējā daļa: 4 pikseļi;
z-indekss:100;
robežas rādiuss:60%;
fona attēls:radiālais gradients(aplis,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,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,225,0.3));
-o-fona attēls:radiālais gradients(aplis,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
}
.acis .line:pēc{
saturs:"";
displejs:bloks;
platums:10px;
augstums:10px;
pozīcija: absolūta;
fons:#000;
pa labi:0;
pa kreisi:-1px;
augšējā daļa: 13 pikseļi;
z-indekss:100;
margin:0 auto;
robežas rādiuss:60%;
transformēt: pagriezt (150 grādi);
-webkit-transform: pagriezt (150 grādi);
-o-transform: pagriezt (150 grādi);
animācija: krāsains 20s vieglums bezgalīgs;
-webkit-animācija: krāsains 20s vieglums bezgalīgs;
-o-animācija: krāsains 20s vieglums bezgalīgs;
}
@keyframes krāsa{
0%{fons:#000; }
35%{fons:#000; }
40%{fons:#f00; }
100%{fons:#f00; }
}
@-webkit-keyframes krāsa{
0%{fons:#000; }
35%{fons:#000; }
40%{fons:#f00; }
100%{fons:#f00; }
}
@-o-keyframes krāsa{
0%{fons:#000; }
35%{fons:#000; }
40%{fons:#f00; }
100%{fons:#f00; }
}
/*******三勾玉 开始*******/
.āķis{
platums:92%;
augstums:92%;
pozīcija: absolūta;
pa labi:0;
pa kreisi:0;
augšējā:5%;
margin:0 auto;
robežas rādiuss:60%;
}
.hook .bar{
displejs:bloks;
platums:100%;
augstums:100%;
pozīcija: absolūta;
pa kreisi:0;
top:0;
robežas rādiuss:60%;
}
.āķis .bar b{
displejs:bloks;
platums:8px;
augstums:8px;
fons:#000;
pozīcija: absolūta;
pa kreisi:0;
apakšā:0;
robežas rādiuss:60%;
}
.hook .bar b:pēc{
saturs:"";
platums:8px;
augstums:8px;
border-color:caurspīdīgs caurspīdīgs #000 caurspīdīgs;
apmales stils:ciets;
apmales platums:0 0 5px 0;
pozīcija: absolūta;
augšā:-1px;
pa kreisi:-3px;
z-indekss:100;
robežas rādiuss:0 0 0 70%;
transformēt: pagriezt(-75 grādi);
-webkit-transform: pagriezt(-75 grādi);
-o-transform: pagriezt(-75gr);
}
.hook .bar:n-th-child(1){
transformēt: pagriezt (10 grādi);
-webkit-transform:pagriezt(10 grādi);
-o-transform: pagriezt (10 grādi);
}
.hook .bar:n-th-child(2){
transformēt: pagriezt (130 grādi);
-webkit-transform: pagriezt (130 grādi);
-o-transformēt: pagriezt (130 grādi);
}
.hook .bar:n-th-child(3){
transformēt: pagriezt (250 grādi);
-webkit-transform: pagriezt(250 grādi);
-o-transform: pagriezt (250 grādi);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
platums:93%;
augstums:93%;
pozīcija: absolūta;
pa labi:0;
pa kreisi:0px;
augšā: 2 pikseļi;
margin:0 auto;
fons:#000;
robežas rādiuss:60%;
}
.tube .bar{
displejs:bloks;
platums:10px;
augstums:20px;
apmales stils:ciets;
apmales platums:0 0 0 10px;
apmales krāsa: caurspīdīga caurspīdīga melna;
pozīcija: absolūta;
robežas rādiuss:100% 0 0 0;
}
.tube .bar:n--bērns(1){
augšā:-10px;
pa kreisi:2px;
transformēt: pagriezt (-10 grādi);
}
.tube .bar:n-th-child(2){
apakšā:0px;
pa labi:-10px;
transformēt: pagriezt (105 grādi);
-webkit-transform: pagriezt (105 grādi);
-o-transform: pagriezt (105 grādi);
}
.tube .bar:n-th-child(3){
apakšā:-3px;
pa kreisi:-10px;
transformēt: pagriezt (235 grādi);
-webkit-transform: pagriezt (235 grādi);
-o-transformēt: pagriezt (235 grādi);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
platums:130px;
augstums:70px;
pozīcija: absolūta;
pārplūde:slēpts;
top:0;
pa kreisi:0;
robežas rādiuss:0 70px 0 50px;
}
.trans .bar{
displejs:bloks;
platums:9px;
augstums:9px;
fons:#000;
pozīcija: absolūta;
top:50%;
z-indekss:2;
margin:-4px 0 0 -4px;
robežas rādiuss:60%;
}
.trans .bar:pēc{
saturs:"";
displejs:bloks;
platums:11px;
augstums:12px;
pozīcija: absolūta;
augšā:-13px;
pa kreisi:-13px;
z-indekss:100;
robežas rādiuss:60%;
fons:rgba(250,250,250,.85);
}
.pullLeft .trans .bar{
transform:skewX(-15gr);
-webkit-transform:skewX(-15gr);
-o-transform:skewX(-15 grādi);
}
.pullLeft .trans .bar{pa kreisi:48%; }
.pullRight .trans .bar{
transform:skewX(-15grādi) skala(-1,1);
-webkit-transform:skewX(-15grādi) skala(-1,1);
-o-transform:skewX(-15grādi) skala(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-šaurs{
animācija:ani-šaurs 20s vieglums bezgalīgs;
-webkit-animācija:ani-šaurs 20s vieglums bezgalīgs;
-o-animācija:ani-šaurs 20s vieglums bezgalīgs;
}
@keyframes ani-šaurs{
0%{necaurspīdīgums:1; transform:mērogs(1); }
5%{necaurspīdīgums:1; transform:mērogs(1); }
10%{necaurspīdīgums:0; transform:mērogs(0); }
87%{necaurspīdīgums:0; transform:mērogs(0); }
90%{necaurspīdīgums:1; transform:mērogs(1); }
100%{necaurspīdīgums:1; transform:mērogs(1); }
}
@-webkit-keyframes ani-narrow{
0%{necaurspīdīgums:1; -webkit-transform:mērogs(1); }
5%{necaurspīdīgums:1; -webkit-transform:mērogs(1); }
10%{necaurspīdīgums:0; -webkit-transform:mērogs(0); }
87%{necaurspīdīgums:0; -webkit-transform:mērogs(0); }
90%{necaurspīdīgums:1; -webkit-transform:mērogs(1); }
100%{necaurspīdīgums:1; -webkit-transform:mērogs(1); }
}
@-o-keyframes ani-narrow{
0%{necaurspīdīgums:1; -o-transformācija:mērogs(1); }
5%{necaurspīdīgums:1; -o-transformācija:mērogs(1); }
10%{necaurspīdīgums:0; -o-transformācija:mērogs(0); }
87%{necaurspīdīgums:0; -o-transformācija:mērogs(0); }
90%{necaurspīdīgums:1; -o-transformācija:mērogs(1); }
100%{necaurspīdīgums:1; -o-transformācija:mērogs(1); }
}
.ani-tālummaiņa{
animācija:ani-zoom 20s lineārs bezgalīgs;
-webkit-animācija:ani-zoom 20s lineārs bezgalīgs;
-o-animācija:ani-tālummaiņa 20s lineārs bezgalīgs;
}
@keyframes ani-zoom{
0%{necaurspīdīgums:0; transform:mērogs(0); }
5%{necaurspīdīgums:0; transform:mērogs(0); }
8%{necaurspīdīgums:1; transform:mērogs(1); }
60%{necaurspīdīgums:1; transform:mērogs(1); }
62%{necaurspīdīgums:0; transformēt:mērogs(1.5); }
100%{necaurspīdīgums:0; transform:mērogs(0); }
}
@-webkit-keyframes ani-zoom{
0%{necaurspīdīgums:0; -webkit-transform:mērogs(0); }
5%{necaurspīdīgums:0; -webkit-transform:mērogs(0); }
8%{necaurspīdīgums:1; -webkit-transform:mērogs(1); }
60%{necaurspīdīgums:1; -webkit-transform:mērogs(1); }
62%{necaurspīdīgums:0; -webkit-transform:mērogs(1.5); }
100%{necaurspīdīgums:0; -webkit-transform:mērogs(0); }
}
@-o-keyframes ani-zoom{
0%{necaurspīdīgums:0; -o-transformācija:mērogs(0); }
5%{necaurspīdīgums:0; -o-transformācija:mērogs(0); }
8%{necaurspīdīgums:1; -o-transformācija:mērogs(1); }
60%{necaurspīdīgums:1; -o-transformācija:mērogs(1); }
62%{necaurspīdīgums:0; -o-transformācija:mērogs(1.5); }
100%{necaurspīdīgums:0; -o-transformācija:mērogs(0); }
}
.ani-rotateHook{
animācija:ani-rotateHook 20s vieglums bezgalīgs;
-webkit-animation:ani-rotateHook 20s vieglums bezgalīgs;
-o-animācija:ani-rotateHook 20s vieglums bezgalīgs;
}
@keyframes ani-rotateHook{
0%{necaurspīdīgums:0; transform:scale(0) rotate(0); }
9%{necaurspīdīgums:0; transform:scale(0) rotate(0); }
13%{necaurspīdīgums:1; transformēt: mērogs(1) pagriezt(-360 grādi); }
35%{necaurspīdīgums:1; transformēt: mērogs(1) pagriezt(-360 grādi); }
38%{necaurspīdīgums:0; transformēt: mērogs (1.8) pagriezt (-540 grādi); }
100%{necaurspīdīgums:0; transform:scale(0) rotate(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{necaurspīdīgums:0; -webkit-transform:scale(0) rotate(0); }
9%{necaurspīdīgums:0; -webkit-transform:scale(0) rotate(0); }
13%{necaurspīdīgums:1; -webkit-transform:mērogs(1) pagriezt(-360gr); }
35%{necaurspīdīgums:1; -webkit-transform:mērogs(1) pagriezt(-360gr); }
38%{necaurspīdīgums:0; -webkit-transform: mērogs (1.8) pagriezt (-540 grādi); }
100%{necaurspīdīgums:0; -webkit-transform:scale(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
0%{necaurspīdīgums:0; -o-transform:mērogs(0) pagriezt(0); }
9%{necaurspīdīgums:0; -o-transform:mērogs(0) pagriezt(0); }
13%{necaurspīdīgums:1; -o-transform: mērogs(1) pagriezt(-360 grādi); }
35%{necaurspīdīgums:1; -o-transform: mērogs(1) pagriezt(-360 grādi); }
38%{necaurspīdīgums:0; -o-transform: mērogs(1.8) pagriezt(-540 grādi); }
100%{necaurspīdīgums:0; -o-transform:mērogs(0) pagriezt(0); }
}
.ani-rotateTube{
animācija:ani-rotateTube 20s vieglums iekšā-ārā bezgalīgs;
-webkit-animācija:ani-rotateTube 20s vieglums-in-out bezgalīgs;
-o-animācija:ani-rotateTube 20s vieglums iekšā-ārā bezgalīgs;
}
@keyframes ani-rotateTube{
0%{necaurspīdīgums:0; transform:scale(0) rotate(0); }
35%{necaurspīdīgums:0; transform:scale(0) rotate(0); }
40%{necaurspīdīgums:1; transformēt: mērogs(1) pagriezt(-360 grādi); }
60%{necaurspīdīgums:1; transformēt: mērogs(1) pagriezt(-360 grādi); }
100%{necaurspīdīgums:1; transformēt: mērogs(1) pagriezt(-360 grādi); }
}
@-webkit-keyframes ani-rotateTube{
0%{necaurspīdīgums:0; -webkit-transform:scale(0) rotate(0); }
35%{necaurspīdīgums:0; -webkit-transform:scale(0) rotate(0); }
40%{necaurspīdīgums:1; -webkit-transform:mērogs(1) pagriezt(-360gr); }
60%{necaurspīdīgums:1; -webkit-transform:mērogs(1) pagriezt(-360gr); }
100%{necaurspīdīgums:1; -webkit-transform:mērogs(1) pagriezt(-360gr); }
}
@-o-keyframes ani-rotateTube{
0%{necaurspīdīgums:0; -o-transform:mērogs(0) pagriezt(0); }
35%{necaurspīdīgums:0; -o-transform:mērogs(0) pagriezt(0); }
40%{necaurspīdīgums:1; -o-transform: mērogs(1) pagriezt(-360 grādi); }
60%{necaurspīdīgums:1; -o-transform: mērogs(1) pagriezt(-360 grādi); }
100%{necaurspīdīgums:1; -o-transform: mērogs(1) pagriezt(-360 grādi); }
}
.ani-ēna{
animācija:ani-ēna 20s lineāra bezgalīga;
-webkit-animācija:ani-ēna 20s lineārs bezgalīgs;
-o-animācija:ani-ēna 20s lineāra bezgalīga;
}
@keyframes ani-ēna{
0%{necaurspīdīgums:0; kastes ēna:nav; }
58%{necaurspīdīgums:0; kastes ēna:nav; }
64%{necaurspīdīgums:1; kastes ēna: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%{necaurspīdīgums:1; kastes ēna: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%{necaurspīdīgums:0; kastes ēna:nav; }
100%{necaurspīdīgums:0; kastes ēna:nav; }
}
@-webkit-keyframes ani-shadow{
0%{necaurspīdīgums:0; kastes ēna:nav; }
58%{necaurspīdīgums:0; kastes ēna:nav; }
64%{necaurspīdīgums:1; kastes ēna: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%{necaurspīdīgums:1; kastes ēna: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%{necaurspīdīgums:0; kastes ēna:nav; }
100%{necaurspīdīgums:0; kastes ēna:nav; }
}
@-o-keyframes ani-shadow{
0%{necaurspīdīgums:0; kastes ēna:nav; }
58%{necaurspīdīgums:0; kastes ēna:nav; }
64%{necaurspīdīgums:1; kastes ēna: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%{necaurspīdīgums:1; kastes ēna: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%{necaurspīdīgums:0; kastes ēna:nav; }
100%{necaurspīdīgums:0; kastes ēna:nav; }
}
.ani-šaurs,.ani-tālummaiņa,.ani-pagrieztĀķis,
.ani-rotateTube,.ani-shadow,.eyes .line:pēc{
animācijas aizpildīšanas režīms:uz priekšu;
-webkit-animation-fill-mode:abi;
-o-animācijas-aizpildīšanas režīms:abi;
}
</style>
</head>
<body>
<div class="container">
<!-- sākas kreisā acs - >
<div class="eyesBoxs pullLeft">
<div class="profile skewLeft"></div>
<div class="shadow skewLeft"></div>
<div class="pamata ani-šaurs"></div>
<div class="acis ani-zoom">
<div class="line">
<div class="hook ani-rotateHook">
<span class="bar"><b></b></span>
<span class="bar"><b></b></span>
<span class="bar"><b></b></span>
</div>
<div class="tube ani-rotateTube">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="trans skewLeft">
<span class="bar ani-shadow"></span>
</div>
</div>
<!-- kreisās acs gals - >
<!-- sākas labā acs - >
<div class="eyesBoxs pullRight">
<div class="profile skewRight"></div>
<div class="shadow skewRight"></div>
<div class="pamata ani-šaurs"></div>
<div class="acis ani-zoom">
<div class="line">
<div class="hook ani-rotateHook">
<span class="bar"><b></b></span>
<span class="bar"><b></b></span>
<span class="bar"><b></b></span>
</div>
<div class="tube ani-rotateTube">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="trans skewRight">
<span class="bar ani-shadow"></span>
</div>
</div>
<!-- labās acs galus - >
</div>
</body>
[/</html>mw_shl_code]
|
Publicēts 14.11.2014 17:55:02
|
|
|
|
Saimnieks|
Publicēts 14.11.2014 17:57:04
|
Publicēts 14.11.2014 17:58:15
|
