[mw_shl_code=css,true] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{paraštė:0; paminkštinimas:0; }
.container{ plotis:750px; aukštis:200px; paraštė:30px automatinis; perpildymas:paslėptas; fonas:#000; padėtis:santykinė; }
.eyesBoxes{plotis:130px; aukštis:70px; padėtis: absoliutus; viršuje:50px; }
.pullLeft{kairė:100px; }
.pullRight{dešinė:100px; }
.profile{
plotis:130px;
aukštis:70px;
fonas:#fff;
padėtis: absoliutus;
viršus:0;
kairė:0;
perpildymas:paslėptas;
krašto spindulys:0 70px 0 50px;
}
.shadow{
ekranas:blokas;
plotis:130px;
aukštis:70px;
padėtis: absoliutus;
viršus:0;
z indeksas:5;
krašto spindulys:0 90px 0 60px;
dėžutės šešėlis:5px 12px 2px 5px rgba(0,0,0,.25) įdėklas;
}
.skewLeft{
transformuoti:pasviręsX(15 laipsnių);
-webkit-transform:skewX(15deg);
-o-transform:skewX(15deg);
}
.skewRight{
transformacija:skewX (-15deg) skalė (-1,1);
-webkit-transform:skewX(-15deg) skalė(-1,1);
-o-transform:skewX(-15deg) skalė(-1,1);
}
.basic{
plotis:60px;
aukštis:60px;
fonas:#000;
padėtis: absoliutus;
viršuje:50%;
kairė:50%;
z indeksas:10;
margin-top:-30px;
sienos spindulys:60%;
}
.basic:prieš{
turinys:"";
ekranas:blokas;
plotis:10px;
aukštis:11px;
padėtis: absoliutus;
kairėje:15px;
viršuje:15px;
z indeksas:100;
sienos spindulys:60%;
fono vaizdas:radialinis gradientas(apskritimas,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
-webkit-background-image:radial-gradient(apskritimas,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
-o-background-image:radial-gradient(apskritimas,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
}
.pullLeft .basic{
paraštė kairėje:-33px;
}
.pullRight .basic{
paraštė-kairė:-27px;
}
.eyes{
plotis:55px;
aukštis:55px;
fonas:#ff0000;
padėtis: absoliutus;
viršuje:8px;
sienos spindulys:60%;
dėžutės šešėlis:0 0 2px 4px #bd0000 įdėklas,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
plotis:64%;
ūgis:64%;
fonas:#ff0000;
padėtis: absoliutus;
dešinėje:0;
kairė:0;
viršuje:10px;
paraštė:0 automatinis;
sienos spindulys:60%;
dėžutės šešėlis:0 0 2px 0 #b20000 įdėklas;
}
.eyes .line:prieš{
turinys:"";
ekranas:blokas;
plotis:10px;
aukštis:11px;
padėtis: absoliutus;
kairėje:3px;
viršuje:4px;
z indeksas:100;
sienos spindulys:60%;
fono vaizdas:radialinis gradientas(apskritimas,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(apskritimas,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
-o-background-image:radial-gradient(apskritimas,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
}
.eyes .line:after{
turinys:"";
ekranas:blokas;
plotis:10px;
aukštis:10px;
padėtis: absoliutus;
fonas:#000;
dešinėje:0;
kairėje:-1px;
viršuje:13px;
z indeksas:100;
paraštė:0 automatinis;
sienos spindulys:60%;
transformuoti: pasukti (150 laipsnių);
-webkit-transform: pasukti (150 laipsnių);
-o-transformuoti: pasukti (150 laipsnių);
animacija: spalvota 20s lengvumas begalinis;
-webkit-animacija: spalvota 20s lengvumas begalybė;
-o-animacija: spalvota 20s lengvumas begalinis;
}
@keyframes spalva{
0%{fonas:#000; }
35%{fonas:#000; }
40%{fonas:#f00; }
100%{fonas:#f00; }
}
@-webkit-keyframes spalva{
0%{fonas:#000; }
35%{fonas:#000; }
40%{fonas:#f00; }
100%{fonas:#f00; }
}
@-o-keyframes spalva{
0%{fonas:#000; }
35%{fonas:#000; }
40%{fonas:#f00; }
100%{fonas:#f00; }
}
/*******三勾玉 开始*******/
.kabliukas{
plotis:92%;
ūgis:92%;
padėtis: absoliutus;
dešinėje:0;
kairė:0;
viršuje:5%;
paraštė:0 automatinis;
sienos spindulys:60%;
}
.kabliukas .bar{
ekranas:blokas;
plotis:100%;
aukštis:100%;
padėtis: absoliutus;
kairė:0;
viršus:0;
sienos spindulys:60%;
}
.kabliukas .bar b{
ekranas:blokas;
plotis:8px;
aukštis:8px;
fonas:#000;
padėtis: absoliutus;
kairė:0;
apačioje:0;
sienos spindulys:60%;
}
.hook .bar b:after{
turinys:"";
plotis:8px;
aukštis:8px;
krašto spalva: skaidrus skaidrus #000 skaidrus;
kraštinės stilius:vientisas;
kraštinės plotis:0 0 5px 0;
padėtis: absoliutus;
viršuje:-1px;
kairėje:-3px;
z indeksas:100;
krašto spindulys:0 0 0 70%;
transformuoti: pasukti (-75 laipsnių);
-webkit-transform: pasukti (-75deg);
-o-transform: pasukti (-75 laipsnių);
}
.kabliukas .bar:n-tas-vaikas(1){
transformuoti: pasukti (10 laipsnių);
-webkit-transform: pasukti (10 laipsnių);
-o-transform: pasukti (10 laipsnių);
}
.kabliukas .bar:n-tas-vaikas(2){
transformuoti: pasukti (130 laipsnių);
-webkit-transform: pasukti (130 laipsnių);
-o-transformuoti: pasukti (130 laipsnių);
}
.kabliukas .bar:n-tas-vaikas(3){
transformuoti: pasukti (250 laipsnių);
-webkit-transform: pasukti (250 laipsnių);
-o-transformuoti: pasukti (250 laipsnių);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
plotis:93%;
ūgis:93%;
padėtis: absoliutus;
dešinėje:0;
kairė:0px;
viršuje:2px;
paraštė:0 automatinis;
fonas:#000;
sienos spindulys:60%;
}
.tube .bar{
ekranas:blokas;
plotis:10px;
aukštis:20px;
kraštinės stilius:vientisas;
kraštinės plotis:0 0 0 10px;
krašto spalva: skaidri skaidri juoda;
padėtis: absoliutus;
krašto spindulys:100% 0 0 0;
}
.tube .bar:n-tasis vaikas(1){
viršuje:-10px;
kairėje:2px;
transformuoti: pasukti (-10 laipsnių);
}
.tube .bar:n-tasis vaikas(2){
apačioje:0px;
dešinėje:-10px;
transformuoti: pasukti (105 laipsnių);
-webkit-transform: pasukti (105 laipsnių);
-o-transformuoti: pasukti (105 laipsnių);
}
.tube .bar:n-tasis vaikas(3){
apačia:-3px;
kairėje:-10px;
transformuoti: pasukti (235 laipsnių);
-webkit-transform: pasukti (235 laipsnių);
-o-transformuoti: pasukti (235 laipsnių);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
plotis:130px;
aukštis:70px;
padėtis: absoliutus;
perpildymas:paslėptas;
viršus:0;
kairė:0;
krašto spindulys:0 70px 0 50px;
}
.trans .bar{
ekranas:blokas;
plotis:9px;
aukštis:9px;
fonas:#000;
padėtis: absoliutus;
viršuje:50%;
z indeksas:2;
paraštė:-4px 0 0 -4px;
sienos spindulys:60%;
}
.trans .bar:po{
turinys:"";
ekranas:blokas;
plotis:11px;
aukštis:12px;
padėtis: absoliutus;
viršuje:-13px;
kairėje:-13px;
z indeksas:100;
sienos spindulys:60%;
fonas:rgba(250,250,250,.85);
}
.pullLeft .trans .bar{
transformuoti:pasviręsX(-15deg);
-webkit-transform:skewX(-15deg);
-o-transform:skewX(-15deg);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
transformacija:skewX (-15deg) skalė (-1,1);
-webkit-transform:skewX(-15deg) skalė(-1,1);
-o-transform:skewX(-15deg) skalė(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-siauras{
animacija:ani-siauras 20s lengvumas begalinis;
-webkit-animation:ani-siauras 20s lengvumas begalinis;
-o-animacija:ani-siauras 20s lengvumas begalinis;
}
@keyframes ani-siauras{
0%{neskaidrumas:1; transformuoti:mastelis(1); }
5%{neskaidrumas:1; transformuoti:mastelis(1); }
10%{neskaidrumas:0; transformuoti:mastelis(0); }
87%{neskaidrumas:0; transformuoti:mastelis(0); }
90%{neskaidrumas:1; transformuoti:mastelis(1); }
100%{neskaidrumas:1; transformuoti:mastelis(1); }
}
@-webkit-keyframes ani-narrow{
0%{neskaidrumas:1; -webkit-transform:mastelis(1); }
5%{neskaidrumas:1; -webkit-transform:mastelis(1); }
10%{neskaidrumas:0; -webkit-transform:mastelis(0); }
87%{neskaidrumas:0; -webkit-transform:mastelis(0); }
90%{neskaidrumas:1; -webkit-transform:mastelis(1); }
100%{neskaidrumas:1; -webkit-transform:mastelis(1); }
}
@-o-keyframes ani-narrow{
0%{neskaidrumas:1; -o-transformacija:mastelis(1); }
5%{neskaidrumas:1; -o-transformacija:mastelis(1); }
10%{neskaidrumas:0; -o-transformacija:mastelis(0); }
87%{neskaidrumas:0; -o-transformacija:mastelis(0); }
90%{neskaidrumas:1; -o-transformacija:mastelis(1); }
100%{neskaidrumas:1; -o-transformacija:mastelis(1); }
}
.ani-zoom{
animacija:ani-zoom 20s linijinis begalinis;
-webkit-animation:ani-zoom 20s linijinis begalinis;
-o-animacija:ani-zoom 20s linijinis begalinis;
}
@keyframes ani-zoom{
0%{neskaidrumas:0; transformuoti:mastelis(0); }
5%{neskaidrumas:0; transformuoti:mastelis(0); }
8%{neskaidrumas:1; transformuoti:mastelis(1); }
60%{neskaidrumas:1; transformuoti:mastelis(1); }
62%{neskaidrumas:0; transformuoti:mastelis(1.5); }
100%{neskaidrumas:0; transformuoti:mastelis(0); }
}
@-webkit-keyframes ani-zoom{
0%{neskaidrumas:0; -webkit-transform:mastelis(0); }
5%{neskaidrumas:0; -webkit-transform:mastelis(0); }
8%{neskaidrumas:1; -webkit-transform:mastelis(1); }
60%{neskaidrumas:1; -webkit-transform:mastelis(1); }
62%{neskaidrumas:0; -webkit-transform:mastelis(1.5); }
100%{neskaidrumas:0; -webkit-transform:mastelis(0); }
}
@-o-keyframes ani-zoom{
0%{neskaidrumas:0; -o-transformacija:mastelis(0); }
5%{neskaidrumas:0; -o-transformacija:mastelis(0); }
8%{neskaidrumas:1; -o-transformacija:mastelis(1); }
60%{neskaidrumas:1; -o-transformacija:mastelis(1); }
62%{neskaidrumas:0; -o-transformacija:mastelis(1.5); }
100%{neskaidrumas:0; -o-transformacija:mastelis(0); }
}
.ani-rotateHook{
animacija:ani-rotateHook 20s lengvumas begalinis;
-webkit-animation:ani-rotateHook 20s lengvumas begalybėje;
-o-animation:ani-rotateHook 20s lengvumas begalinis;
}
@keyframes ani-rotateHook{
0%{neskaidrumas:0; transformuoti:mastelis(0) pasukti(0); }
9%{neskaidrumas:0; transformuoti:mastelis(0) pasukti(0); }
13%{neskaidrumas:1; transformuoti: mastelis (1) pasukti (-360 laipsnių); }
35%{neskaidrumas:1; transformuoti: mastelis (1) pasukti (-360 laipsnių); }
38%{neskaidrumas:0; transformuoti: mastelis (1.8) pasukti (-540 laipsnių); }
100%{neskaidrumas:0; transformuoti:mastelis(0) pasukti(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{neskaidrumas:0; -webkit-transform:scale(0) rotate(0); }
9%{neskaidrumas:0; -webkit-transform:scale(0) rotate(0); }
13%{neskaidrumas:1; -webkit-transform:scale(1) rotate(-360deg); }
35%{neskaidrumas:1; -webkit-transform:scale(1) rotate(-360deg); }
38%{neskaidrumas:0; -webkit-transform: mastelis (1.8) pasukti (-540deg); }
100%{neskaidrumas:0; -webkit-transform:scale(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
0%{neskaidrumas:0; -o-transform:scale(0) rotate(0); }
9%{neskaidrumas:0; -o-transform:scale(0) rotate(0); }
13%{neskaidrumas:1; -o-transform: mastelis(1) pasukti(-360 laipsnių); }
35%{neskaidrumas:1; -o-transform: mastelis(1) pasukti(-360 laipsnių); }
38%{neskaidrumas:0; -o-transformacija: mastelis (1.8) pasukti (-540 laipsnių); }
100%{neskaidrumas:0; -o-transform:scale(0) rotate(0); }
}
.ani-rotateTube{
animacija:ani-rotateTube 20s lengvumas į-išėjimas begalinis;
-webkit-animacija:ani-rotateTube 20s lengvumas in-out begalinis;
-o-animacija:ani-rotateTube 20s lengvumas į-išėjimas begalinis;
}
@keyframes ani-rotateTube{
0%{neskaidrumas:0; transformuoti:mastelis(0) pasukti(0); }
35%{neskaidrumas:0; transformuoti:mastelis(0) pasukti(0); }
40%{neskaidrumas:1; transformuoti: mastelis (1) pasukti (-360 laipsnių); }
60%{neskaidrumas:1; transformuoti: mastelis (1) pasukti (-360 laipsnių); }
100%{neskaidrumas:1; transformuoti: mastelis (1) pasukti (-360 laipsnių); }
}
@-webkit-keyframes ani-rotateTube{
0%{neskaidrumas:0; -webkit-transform:scale(0) rotate(0); }
35%{neskaidrumas:0; -webkit-transform:scale(0) rotate(0); }
40%{neskaidrumas:1; -webkit-transform:scale(1) rotate(-360deg); }
60%{neskaidrumas:1; -webkit-transform:scale(1) rotate(-360deg); }
100%{neskaidrumas:1; -webkit-transform:scale(1) rotate(-360deg); }
}
@-o-keyframes ani-rotateTube{
0%{neskaidrumas:0; -o-transform:scale(0) rotate(0); }
35%{neskaidrumas:0; -o-transform:scale(0) rotate(0); }
40%{neskaidrumas:1; -o-transform: mastelis(1) pasukti(-360 laipsnių); }
60%{neskaidrumas:1; -o-transform: mastelis(1) pasukti(-360 laipsnių); }
100%{neskaidrumas:1; -o-transform: mastelis(1) pasukti(-360 laipsnių); }
}
.ani-šešėlis{
animacija:ani-shadow 20s linijinis begalinis;
-webkit-animation:ani-shadow 20s linijinis begalinis;
-o-animacija:ani-šešėlis 20s linijinis begalinis;
}
@keyframes ani-shadow{
0%{neskaidrumas:0; dėžutės šešėlis:nėra; }
58%{neskaidrumas:0; dėžutės šešėlis:nėra; }
64%{neskaidrumas:1; dėžutės šešėlis: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%{neskaidrumas:1; dėžutės šešėlis: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%{neskaidrumas:0; dėžutės šešėlis:nėra; }
100%{neskaidrumas:0; dėžutės šešėlis:nėra; }
}
@-webkit-keyframes ani-shadow{
0%{neskaidrumas:0; dėžutės šešėlis:nėra; }
58%{neskaidrumas:0; dėžutės šešėlis:nėra; }
64%{neskaidrumas:1; dėžutės šešėlis: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%{neskaidrumas:1; dėžutės šešėlis: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%{neskaidrumas:0; dėžutės šešėlis:nėra; }
100%{neskaidrumas:0; dėžutės šešėlis:nėra; }
}
@-o-keyframes ani-shadow{
0%{neskaidrumas:0; dėžutės šešėlis:nėra; }
58%{neskaidrumas:0; dėžutės šešėlis:nėra; }
64%{neskaidrumas:1; dėžutės šešėlis: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%{neskaidrumas:1; dėžutės šešėlis: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%{neskaidrumas:0; dėžutės šešėlis:nėra; }
100%{neskaidrumas:0; dėžutės šešėlis:nėra; }
}
.ani siauras, .ani priartinimas, .ani pasukimasKabliukas,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
animacijos užpildymo režimas:persiųsti;
-webkit-animation-fill-mode:abu;
-o-animacijos-užpildymo režimas:abu;
}
</style>
</head>
<body>
<div class="container">
<!-- prasideda kairė akis - >
<div class="eyesBoxs pullLeft">
<div class="profile skewLeft"></div>
<div class="shadow skewLeft"></div>
<div class="basic ani-narrow"></div>
<div class="akys ani-zoom">
<div class="line">
<div class="kabliukas 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>
<!-- kairės akies galas - >
<!-- prasideda dešinė akis - >
<div class="eyesBoxs pullRight">
<div class="profile skewRight"></div>
<div class="shadow skewRight"></div>
<div class="basic ani-narrow"></div>
<div class="akys ani-zoom">
<div class="line">
<div class="kabliukas 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>
<!-- dešinės akies galai - >
</div>
</body>
[/</html>mw_shl_code]
|
Paskelbta 2014-11-14 17:55:02
|
|
|
|
Savininkas|
Paskelbta 2014-11-14 17:57:04
|
Paskelbta 2014-11-14 17:58:15
|
