[mw_shl_code=css,true] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; wypełnienie:0; }
.container{ width:750px; wysokość: 200px; margines: 30px auto; przelew: ukryty; tło: #000; pozycja:względna; }
.eyesBoxs{width:130px; wysokość: 70px; pozycja: absolutna; góra: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
szerokość: 130px;
wysokość: 70px;
tło: #fff;
pozycja: absolutna;
top:0;
lewo:0;
przelew: ukryty;
promień granicy: 0 70px 0 50px;
}
.shadow{
display:block;
szerokość: 130px;
wysokość: 70px;
pozycja: absolutna;
top:0;
z-index:5;
promień granicy: 0 90px 0 60px;
cień pudełkowy: 5px 12px 2px 5px RGBA (0,0,0,0,25) wstawione;
}
.skewLeft{
transform:skewX(15°F);
-webkit-transform:skewX(15°);
-o-transform:skewX(15°);
}
.skewRight{
transformacja:skewX(-15°) skala (-1,1);
-webkit-transform:skewX(-15°) skala(-1,1);
-o-transformacja:skewX(-15°) skala(-1,1);
}
.basic{
szerokość: 60px;
wysokość: 60px;
tło: #000;
pozycja: absolutna;
góra: 50%;
lewo: 50%;
z-indeks:10;
margin-top:-30px;
promień granicy: 60%;
}
.basic:before{
treść:"";
display:block;
szerokość: 10px;
wysokość: 11px;
pozycja: absolutna;
lewo: 15px;
góra: 15px;
z-indeks: 100;
promień granicy: 60%;
Obraz tła: Radial-gradient (circle,RGB(225,225,225),RGB(225,225,225),RGB(225,225,0,9),RGBA (225,225,225,0,3));
-webkit-tło-obraz:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgb(225,225,0,9),rgba (225,225,225,0,3));
-o-tło-obraz:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0,9),rgba (225,225,225,0,3));
}
.pullLeft .basic{
margin-left:-33px;
}
.pullRight .basic{
margin-left:-27px;
}
.eyes{
szerokość: 55px;
wysokość: 55px;
Tło: #ff0000;
pozycja: absolutna;
top: 8px;
promień granicy: 60%;
box-shadow:0 0 2px 4px #bd0000 wstawiony,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
szerokość: 64%;
wysokość: 64%;
Tło: #ff0000;
pozycja: absolutna;
prawa:0;
lewo:0;
top: 10px;
margines:0 auto;
promień granicy: 60%;
box-cień:0 0 2px 0 #b20000 wstawiony;
}
.eyes .line:before{
treść:"";
display:block;
szerokość: 10px;
wysokość: 11px;
pozycja: absolutna;
lewo: 3px;
góra: 4px;
z-indeks: 100;
promień granicy: 60%;
Obraz tła: gradient promieniowy (circle,rgb(225,225,225),RGB(225,225,225),RGBA(225,225,0,7),RGBBA(225,225,225,0,3));
-webkit-tło-obraz:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgb(225,225,0,7),rgba (225,225,225,0,3));
-o-tło-obraz:radial-gradient (circle,rgb(225,225,225),rgb(225,225,225),rgb(225,225,0,7),rgba (225,225,225,0,3));
}
.eyes .line:after{
treść:"";
display:block;
szerokość: 10px;
wysokość: 10px;
pozycja: absolutna;
tło: #000;
prawa:0;
left:-1px;
góra: 13px;
z-indeks: 100;
margines:0 auto;
promień granicy: 60%;
transform:rotate (150°);
-webkit-transform:rotate(150°°);
-o-transformacja:obrót (150°);
animacja: nieskończona łatwość w kolorze 20s;
-webkit-animation: kolorowe 20s ease-in infinite;
-o-animation:colour 20s ease-in infinite;
}
@keyframes colour{
0%{tło:#000; }
35%{tło:#000; }
40%{tło:#f00; }
100%{tło:#f00; }
}
@-webkit-keyframes color{
0%{tło:#000; }
35%{tło:#000; }
40%{tło:#f00; }
100%{tło:#f00; }
}
@-o-keyframes color{
0%{tło:#000; }
35%{tło:#000; }
40%{tło:#f00; }
100%{tło:#f00; }
}
/*******三勾玉 开始*******/
.hook{
szerokość: 92%;
wzrost: 92%;
pozycja: absolutna;
prawa:0;
lewo:0;
góra: 5%;
margines:0 auto;
promień granicy: 60%;
}
.hook .bar{
display:block;
szerokość: 100%;
wysokość: 100%;
pozycja: absolutna;
lewo:0;
top:0;
promień granicy: 60%;
}
.hook .bar b{
display:block;
szerokość: 8px;
wysokość: 8px;
tło: #000;
pozycja: absolutna;
lewo:0;
dolny:0;
promień granicy: 60%;
}
.hook .bar b:after{
treść:"";
szerokość: 8px;
wysokość: 8px;
kolor ramki: przezroczysty, przezroczysty #000;
styl ramowy: jednolity;
szerokość ramki: 0 0 5px 0;
pozycja: absolutna;
góra: -1px;
lewo:-3px;
z-indeks: 100;
promień granicy: 0 0 0 70%;
transform: obróć (-75°);
-webkit-transform:rotate(-75°);
-o-transformacja:obrót (-75°);
}
.hook .bar:nth-child(1){
transform:rotate (10°F);
-webkit-transform:rotate(10°F);
-o-transformacja:obrót (10°);
}
.hook .bar:nth-child(2){
transform:rotuj (130°);
-webkit-transform:rotate(130°);
-o-transform:rotate(130°);
}
.hook .bar:nth-child(3){
transform:rotuj (250°F);
-webkit-transform:rotate(250°);
-o-transformacja:obrót (250°);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
szerokość: 93%;
wzrost: 93%;
pozycja: absolutna;
prawa:0;
left:0px;
góra: 2px;
margines:0 auto;
tło: #000;
promień granicy: 60%;
}
.tube .bar{
display:block;
szerokość: 10px;
wysokość: 20px;
styl ramowy: jednolity;
szerokość ramki: 0 0 0 10px;
Kolor ramki: przezroczysty, przezroczysty, przezroczysty;
pozycja: absolutna;
promień granicy: 100% 0 0 0;
}
.tube .bar:nth-child(1){
góra: -10px;
lewo: 2px;
transform:rotate (-10°F);
}
.tube .bar:nth-child(2){
dolny:0px;
prawa: -10px;
transform:rotate (105°F);
-webkit-transform:rotate(105°°);
-o-transformacja:obrót (105°);
}
.tube .bar:nth-child(3){
Na dole: -3px;
lewo: -10px;
transform:rotuj (235°F);
-webkit-transform:rotate(235°F);
-o-transformacja:obrót (235°);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
szerokość: 130px;
wysokość: 70px;
pozycja: absolutna;
przelew: ukryty;
top:0;
lewo:0;
promień granicy: 0 70px 0 50px;
}
.trans .bar{
display:block;
szerokość: 9px;
wysokość: 9px;
tło: #000;
pozycja: absolutna;
góra: 50%;
z-indeks:2;
margines:-4px 0 0 -4px;
promień granicy: 60%;
}
.trans .bar:after{
treść:"";
display:block;
szerokość: 11px;
wysokość: 12px;
pozycja: absolutna;
góra: -13px;
lewo: -13px;
z-indeks: 100;
promień granicy: 60%;
tło: rgba (250,250,250,0,85);
}
.pullLeft .trans .bar{
transform:skewX(-15°);
-webkit-transform:skewX(-15°);
-o-transform:skewX(-15°);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
transformacja:skewX(-15°) skala (-1,1);
-webkit-transform:skewX(-15°) skala(-1,1);
-o-transformacja:skewX(-15°) skala(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-narrow{
animacja: ANI-wąskie 20s easeout nieskończone;
-webkit-animation:ani-wąskie 20s easeout nieskończone;
-o-animation:ani-wąskie 20s easeout nieskończony;
}
@keyframes ani-narrow{
0% {przezroczystość:1; transform:scale(1); }
5% {przezroczystość:1; transform:scale(1); }
10% {przezroczystość:0; transform:scale(0); }
87% {przezroczystość:0; transform:scale(0); }
90% {przezroczystość:1; transform:scale(1); }
100% {przezroczystość:1; transform:scale(1); }
}
@-webkit-keyframes ani-narrow{
0% {przezroczystość:1; -webkit-transform:scale(1); }
5% {przezroczystość:1; -webkit-transform:scale(1); }
10% {przezroczystość:0; -webkit-transform:scale(0); }
87% {przezroczystość:0; -webkit-transform:scale(0); }
90% {przezroczystość:1; -webkit-transform:scale(1); }
100% {przezroczystość:1; -webkit-transform:scale(1); }
}
@-o-keyframes ani-narrow{
0% {przezroczystość:1; -o-transform:scale(1); }
5% {przezroczystość:1; -o-transform:scale(1); }
10% {przezroczystość:0; -o-transform:scale(0); }
87% {przezroczystość:0; -o-transform:scale(0); }
90% {przezroczystość:1; -o-transform:scale(1); }
100% {przezroczystość:1; -o-transform:scale(1); }
}
.ani-zoom{
animacja: ani-zoom 20s liniowa nieskończoność;
-webkit-animation:ani-zoom 20s linear infinite;
-o-animation:ani-zoom 20s linear infinite;
}
@keyframes ani-zoom{
0%{przezroczystość:0; transform:scale(0); }
5% {przezroczystość:0; transform:scale(0); }
8% {przezroczystość:1; transform:scale(1); }
60% {przezroczystość:1; transform:scale(1); }
62% {przezroczystość:0; transform:scale(1.5); }
100% {przezroczystość:0; transform:scale(0); }
}
@-webkit-keyframes ani-zoom{
0%{przezroczystość:0; -webkit-transform:scale(0); }
5% {przezroczystość:0; -webkit-transform:scale(0); }
8% {przezroczystość:1; -webkit-transform:scale(1); }
60% {przezroczystość:1; -webkit-transform:scale(1); }
62% {przezroczystość:0; -webkit-transform:scale(1.5); }
100% {przezroczystość:0; -webkit-transform:scale(0); }
}
@-o-keyframes ani-zoom{
0%{przezroczystość:0; -o-transform:scale(0); }
5% {przezroczystość:0; -o-transform:scale(0); }
8% {przezroczystość:1; -o-transform:scale(1); }
60% {przezroczystość:1; -o-transform:scale(1); }
62% {przezroczystość:0; -o-transform:scale(1.5); }
100% {przezroczystość:0; -o-transform:scale(0); }
}
.ani-rotateHook{
animacja: ani-rotateHook 20s ease-in infinite;
-webkit-animation:ani-rotateHook 20s ease-in infinite;
-o-animation:ani-rotateHook 20s ease-in infinite;
}
@keyframes ani-rotateHook{
0%{przezroczystość:0; transform:skala(0) rotacja(0); }
9% {przezroczystość:0; transform:skala(0) rotacja(0); }
13% {przezroczystość:1; transform:skala(1) obrót (-360°); }
35% {nieprzezroczystość:1; transform:skala(1) obrót (-360°); }
38% {przezroczystość:0; transformacja:skala (1,8), obrót (-540°); }
100% {przezroczystość:0; transform:skala(0) rotacja(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{przezroczystość:0; -webkit-transform:scale(0) rotate(0); }
9% {przezroczystość:0; -webkit-transform:scale(0) rotate(0); }
13% {przezroczystość:1; -webkit-transform:skala(1) rotacja(-360°); }
35% {nieprzezroczystość:1; -webkit-transform:skala(1) rotacja(-360°); }
38% {przezroczystość:0; -webkit-transform:skala(1.8) rotacja(-540°); }
100% {przezroczystość:0; -webkit-transform:scale(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
0%{przezroczystość:0; -o-transformacja:skala(0) rotacja(0); }
9% {przezroczystość:0; -o-transformacja:skala(0) rotacja(0); }
13% {przezroczystość:1; -o-transformacja:skala(1) obrót (-360°); }
35% {nieprzezroczystość:1; -o-transformacja:skala(1) obrót (-360°); }
38% {przezroczystość:0; -o-transformacja:skala(1,8) obrót (-540°); }
100% {przezroczystość:0; -o-transformacja:skala(0) rotacja(0); }
}
.ani-rotateTube{
animacja: ani-rotateTube 20s ease-in-out infinite;
-webkit-animation:ani-rotateTube 20s ease-in-out infinite;
-o-animation:ani-rotateTube 20s ease-in-out infinite;
}
@keyframes ani-rotateTube{
0%{przezroczystość:0; transform:skala(0) rotacja(0); }
35% {przezroczystość:0; transform:skala(0) rotacja(0); }
40% {przezroczystość:1; transform:skala(1) obrót (-360°); }
60% {przezroczystość:1; transform:skala(1) obrót (-360°); }
100% {przezroczystość:1; transform:skala(1) obrót (-360°); }
}
@-webkit-keyframes ani-rotateTube{
0%{przezroczystość:0; -webkit-transform:scale(0) rotate(0); }
35% {przezroczystość:0; -webkit-transform:scale(0) rotate(0); }
40% {przezroczystość:1; -webkit-transform:skala(1) rotacja(-360°); }
60% {przezroczystość:1; -webkit-transform:skala(1) rotacja(-360°); }
100% {przezroczystość:1; -webkit-transform:skala(1) rotacja(-360°); }
}
@-o-keyframes ani-rotateTube{
0%{przezroczystość:0; -o-transformacja:skala(0) rotacja(0); }
35% {przezroczystość:0; -o-transformacja:skala(0) rotacja(0); }
40% {przezroczystość:1; -o-transformacja:skala(1) obrót (-360°); }
60% {przezroczystość:1; -o-transformacja:skala(1) obrót (-360°); }
100% {przezroczystość:1; -o-transformacja:skala(1) obrót (-360°); }
}
.ani-cień{
animacja: ani-cień 20s linear infinite;
-webkit-animation:ani-cień 20s liniowy nieskończony;
-o-animation:ani-cień 20s liniowa nieskończoność;
}
@keyframes ani-shadow{
0%{przezroczystość:0; cień pudełkowy: brak; }
58% {przezroczystość:0; cień pudełkowy: brak; }
64% {przezroczystość: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% {przezroczystość: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% {przezroczystość:0; cień pudełkowy: brak; }
100% {przezroczystość:0; cień pudełkowy: brak; }
}
@-webkit-keyframes ani-shadow{
0%{przezroczystość:0; cień pudełkowy: brak; }
58% {przezroczystość:0; cień pudełkowy: brak; }
64% {przezroczystość: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% {przezroczystość: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% {przezroczystość:0; cień pudełkowy: brak; }
100% {przezroczystość:0; cień pudełkowy: brak; }
}
@-o-keyframes ani-shadow{
0%{przezroczystość:0; cień pudełkowy: brak; }
58% {przezroczystość:0; cień pudełkowy: brak; }
64% {przezroczystość: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% {przezroczystość: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% {przezroczystość:0; cień pudełkowy: brak; }
100% {przezroczystość:0; cień pudełkowy: brak; }
}
.ani wąski, .ani-zoom, .ani-obrócięHook,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
animacja-wypełnienie-trybu:forwards;
-webkit-animation-fill-mode:oba;
-o-animation-fill-mode:oba;
}
</style>
</head>
<body>
<div class="container">
<!-- lewym okiem zaczyna się – >
<div class="eyesBoxs pullLeft">
<div class="profile skewLeft"></div>
<div class="shadow skewLeft"></div>
<klasa div="basic ani-narrow"></div>
<div class="eyes ani-zoom">
<div class="linia">
<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">
<klasa rozpęta="bar"></span>
<klasa rozpęta="bar"></span>
<klasa rozpęta="bar"></span>
</div>
</div>
</div>
<div class="trans skewLeft">
<span class="bar ani-shadow"></span>
</div>
</div>
<!-- końcu lewego oka – >
<!-- zaczyna się prawe oko – >
<div class="eyesBoxs pullRight">
<div class="profile skewRight"></div>
<div class="shadow skewRight"></div>
<klasa div="basic ani-narrow"></div>
<div class="eyes ani-zoom">
<div class="linia">
<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">
<klasa rozpęta="bar"></span>
<klasa rozpęta="bar"></span>
<klasa rozpęta="bar"></span>
</div>
</div>
</div>
<div class="trans skewRight">
<span class="bar ani-shadow"></span>
</div>
</div>
<!-- kończy się prawe oko – >
</div>
</body>
[/</html>mw_shl_code]
|
Opublikowano 14.11.2014 17:55:02
|
|
|
|
Ziemianin|
Opublikowano 14.11.2014 17:57:04
|
Opublikowano 14.11.2014 17:58:15
|
