[mw_shl_code=css,true] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; výplň: 0; }
.container{ width:750px; výška: 200px; Margin: 30px auto; pretečenie: skrytý; pozadie: #000; pozícia: relatívna; }
.eyesBoxs{width:130px; výška: 70px; pozícia: absolútna; top: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
šírka: 130px;
výška: 70px;
Pozadie: #fff;
pozícia: absolútna;
top:0;
ľavo:0;
pretečenie: skrytý;
okrajový polomer: 0 70px 0 50px;
}
.shadow{
zobrazenie:blok;
šírka: 130px;
výška: 70px;
pozícia: absolútna;
top:0;
z-index:5;
okrajový polomer: 0 90px 0 60px;
box-shadow: 5px 12px 2px 5px rgba (0,0,0,.25) vložené;
}
.skewLeft{
transform:skewX(15°F);
-webkit-transform:skewX(15°);
-o-transform:skewX(15°);
}
.skewRight{
transform:skewX(-15°) mierka (-1,1);
-webkit-transform:skewX(-15°°) mierka(-1,1);
-o-transform:skewX(-15°°) mierka(-1,1);
}
.basic{
šírka: 60px;
výška: 60px;
pozadie: #000;
pozícia: absolútna;
hore: 50 %;
vľavo: 50 %;
z-index:10;
margin-top:-30px;
polomer hranice: 60 %;
}
.basic:before{
obsah:"";
zobrazenie:blok;
šírka: 10px;
výška: 11px;
pozícia: absolútna;
left:15px;
hore: 15px;
z-index:100;
polomer hranice: 60 %;
Pozadie-obrázok:radiálny gradient (kruh,RGB(225,225,225),RGB(225,225,225),RGBA(225,225,0,9),RGBA(225,225,225,0,3));
-webkit-pozadie-obrázok:radiálny gradient(kruh,rgb(225,225,225),RGB(225,225,225),RGBA(225,225,0,9),RGBA(225,225,225,0,3));
-o-pozadie-obrázok:radiálny gradient(kruh,rgb(225,225,225),RGB(225,225,225),RGBA(225,225,0,9),RGBA(225,225,225,0,3));
}
.pullLeft .basic{
okraj-ľavo:-33px;
}
.pullRight .basic{
okraj-ľavo:-27px;
}
.eyes{
šírka: 55px;
výška: 55px;
Pozadie: #ff0000;
pozícia: absolútna;
hore: 8px;
polomer hranice: 60 %;
box-shadow:0 0 2px 4px #bd0000 vložené,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
šírka: 64 %;
výška: 64 %;
Pozadie: #ff0000;
pozícia: absolútna;
right:0;
ľavo:0;
hore: 10px;
Margin:0 auto;
polomer hranice: 60 %;
box-shadow:0 0 2px 0 #b20000 vložené;
}
.eyes .line:before{
obsah:"";
zobrazenie:blok;
šírka: 10px;
výška: 11px;
pozícia: absolútna;
left:3px;
hore: 4px;
z-index:100;
polomer hranice: 60 %;
pozadie-obrázok:radiálny gradient (kruh,RGB(225,225,225),RGB(225,225,225),RGBA(225,225,0,7),RGBA(225,225,225,0,3));
-webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgb(225,225,0,7),rgba(225,225,225,0.3));
-o-pozadie-obrázok:radiálny gradient(kruh,rgb(225,225,225),RGB(225,225,225),RGBA(225,225,0,7),RGBA(225,225,225,0,3));
}
.eyes .line:after{
obsah:"";
zobrazenie:blok;
šírka: 10px;
výška: 10px;
pozícia: absolútna;
pozadie: #000;
right:0;
vľavo: -1px;
hore: 13px;
z-index:100;
Margin:0 auto;
polomer hranice: 60 %;
transformovať:otáčať (150 stupňov);
-webkit-transform:rotate(150°°);
-o-transform:rotovať(150°);
animácia: Colour 20s ease-in infinite;
-webkit-animácia: Colour 20s ease-in nekonečne;
-o-animation:colour 20s ease-in nekonečne;
}
@keyframes colour{
0%{background:#000; }
35 % {pozadie:#000; }
40 % {pozadie:#f00; }
100 % {pozadie:#f00; }
}
@-webkit-keyframes color{
0%{background:#000; }
35 % {pozadie:#000; }
40 % {pozadie:#f00; }
100 % {pozadie:#f00; }
}
@-o-keyframes color{
0%{background:#000; }
35 % {pozadie:#000; }
40 % {pozadie:#f00; }
100 % {pozadie:#f00; }
}
/*******三勾玉 开始*******/
.hook{
šírka: 92 %;
výška: 92 %;
pozícia: absolútna;
right:0;
ľavo:0;
horná: 5 %;
Margin:0 auto;
polomer hranice: 60 %;
}
.hook .bar{
zobrazenie:blok;
šírka: 100 %;
výška: 100 %;
pozícia: absolútna;
ľavo:0;
top:0;
polomer hranice: 60 %;
}
.hook .bar b{
zobrazenie:blok;
šírka: 8px;
výška: 8px;
pozadie: #000;
pozícia: absolútna;
ľavo:0;
spodok:0;
polomer hranice: 60 %;
}
.hook .bar b:after{
obsah:"";
šírka: 8px;
výška: 8px;
Farba okraja: priehľadná priehľadná #000;
okrajový štýl: masívny;
šírka okraja:0 0 5px 0;
pozícia: absolútna;
hore:-1px;
vľavo: -3px;
z-index:100;
polomer hranice: 0 0 0 70 %;
transform:rotovať (-75°F);
-webkit-transform:rotate(-75°°);
-o-transform:rotovať(-75°°);
}
.hook .bar:nth-child(1){
transform:rotujte (10°);
-webkit-transform:rotate(10°F);
-o-transform:rotovať(10°);
}
.hook .bar:nth-child(2){
transformovať:rotovať (130°);
-webkit-transform:rotate(130°);
-o-transform:rotovať(130°);
}
.hook .bar:nth-child(3){
transform:rotujte (250°);
-webkit-transform:rotate(250°);
-o-transform:rotovať(250°);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
šírka: 93 %;
výška: 93 %;
pozícia: absolútna;
right:0;
left:0px;
hore: 2px;
Margin:0 auto;
pozadie: #000;
polomer hranice: 60 %;
}
.tube .bar{
zobrazenie:blok;
šírka: 10px;
výška: 20px;
okrajový štýl: masívny;
šírka okraja:0 0 0 10px;
Farba okraja: priehľadná priehľadná priehľadná čierna;
pozícia: absolútna;
polomer hranice: 100% 0 0 0;
}
.tube .bar:nth-child(1){
hore:-10px;
left:2px;
transform:rotujte (-10°);
}
.tube .bar:nth-child(2){
dole:0px;
right:-10px;
transform:rotovať (105 stupňov);
-webkit-transform:rotate(105°°);
-o-transform:rotovať(105°);
}
.tube .bar:nth-child(3){
spodná časť: -3px;
left:-10px;
transform:rotovať (235 stupňov);
-webkit-transform:rotate(235°g);
-o-transform:rotovať (235 stupňov);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
šírka: 130px;
výška: 70px;
pozícia: absolútna;
pretečenie: skrytý;
top:0;
ľavo:0;
okrajový polomer: 0 70px 0 50px;
}
.trans .bar{
zobrazenie:blok;
šírka: 9px;
výška: 9px;
pozadie: #000;
pozícia: absolútna;
hore: 50 %;
z-index:2;
margin: -4px 0 0 -4px;
polomer hranice: 60 %;
}
.trans .bar:after{
obsah:"";
zobrazenie:blok;
šírka: 11px;
výška: 12px;
pozícia: absolútna;
hore: -13px;
vľavo: -13px;
z-index:100;
polomer hranice: 60 %;
Pozadie: RGBBA (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{
transform:skewX(-15°) mierka (-1,1);
-webkit-transform:skewX(-15°°) mierka(-1,1);
-o-transform:skewX(-15°°) mierka(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-narrow{
animácia: ANI-úzky 20s ease-out nekonečný;
-webkit-animation:ani-úzky 20s ease-out nekonečný;
-o-animation:ani-úzky 20s ease-out nekonečný;
}
@keyframes ani-narrow{
0% {nepriehľadnosť:1; transform:scale(1); }
5 % {nepriehľadnosť:1; transform:scale(1); }
10 % {nepriehľadnosť: 0; transform:scale(0); }
87 % {nepriehľadnosť: 0; transform:scale(0); }
90 % {nepriehľadnosť:1; transform:scale(1); }
100 % {nepriehľadnosť:1; transform:scale(1); }
}
@-webkit-keyframes ani-narrow{
0% {nepriehľadnosť:1; -webkit-transform:scale(1); }
5 % {nepriehľadnosť:1; -webkit-transform:scale(1); }
10 % {nepriehľadnosť: 0; -webkit-transform:scale(0); }
87 % {nepriehľadnosť: 0; -webkit-transform:scale(0); }
90 % {nepriehľadnosť:1; -webkit-transform:scale(1); }
100 % {nepriehľadnosť:1; -webkit-transform:scale(1); }
}
@-o-keyframes ani-narrow{
0% {nepriehľadnosť:1; -o-transform:scale(1); }
5 % {nepriehľadnosť:1; -o-transform:scale(1); }
10 % {nepriehľadnosť: 0; -o-transform:scale(0); }
87 % {nepriehľadnosť: 0; -o-transform:scale(0); }
90 % {nepriehľadnosť:1; -o-transform:scale(1); }
100 % {nepriehľadnosť:1; -o-transform:scale(1); }
}
.ani-zoom{
animácia: ani-zoom 20s lineárne nekonečné;
-webkit-animation:ani-zoom 20s lineárne nekonečné;
-o-animation:ani-zoom 20s lineárne nekonečné;
}
@keyframes ani-zoom{
0% {nepriehľadnosť:0; transform:scale(0); }
5 % {nepriehľadnosť: 0; transform:scale(0); }
8 % {nepriehľadnosť:1; transform:scale(1); }
60 % {nepriehľadnosť:1; transform:scale(1); }
62 % {nepriehľadnosť:0; transform:scale(1.5); }
100% {nepriehľadnosť:0; transform:scale(0); }
}
@-webkit-keyframes ani-zoom{
0% {nepriehľadnosť:0; -webkit-transform:scale(0); }
5 % {nepriehľadnosť: 0; -webkit-transform:scale(0); }
8 % {nepriehľadnosť:1; -webkit-transform:scale(1); }
60 % {nepriehľadnosť:1; -webkit-transform:scale(1); }
62 % {nepriehľadnosť:0; -webkit-transform:scale(1.5); }
100% {nepriehľadnosť:0; -webkit-transform:scale(0); }
}
@-o-keyframes ani-zoom{
0% {nepriehľadnosť:0; -o-transform:scale(0); }
5 % {nepriehľadnosť: 0; -o-transform:scale(0); }
8 % {nepriehľadnosť:1; -o-transform:scale(1); }
60 % {nepriehľadnosť:1; -o-transform:scale(1); }
62 % {nepriehľadnosť:0; -o-transform:scale(1.5); }
100% {nepriehľadnosť:0; -o-transform:scale(0); }
}
.ani-rotateHook{
animácia: ani-rotateHook 20s ease-in infinite;
-webkit-animation:ani-rotateHook 20s ease-in nekonečne;
-o-animation:ani-rotateHook 20s ease-in nekonečne;
}
@keyframes ani-rotateHook{
0% {nepriehľadnosť:0; transform:scale(0) rotate(0); }
9 % {nepriehľadnosť: 0; transform:scale(0) rotate(0); }
13 % {nepriehľadnosť:1; transform:scale(1) rotovať (-360°); }
35 % {nepriehľadnosť: 1; transform:scale(1) rotovať (-360°); }
38 % {nepriehľadnosť: 0; transform:scale(1,8), rotate (-540°F); }
100% {nepriehľadnosť:0; transform:scale(0) rotate(0); }
}
@-webkit-keyframes ani-rotateHook{
0% {nepriehľadnosť:0; -webkit-transform:scale(0) rotate(0); }
9 % {nepriehľadnosť: 0; -webkit-transform:scale(0) rotate(0); }
13 % {nepriehľadnosť:1; -webkit-transform:scale(1) rotate(-360°); }
35 % {nepriehľadnosť: 1; -webkit-transform:scale(1) rotate(-360°); }
38 % {nepriehľadnosť: 0; -webkit-transform:scale(1.8) rotate(-540°); }
100% {nepriehľadnosť:0; -webkit-transform:scale(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
0% {nepriehľadnosť:0; -o-transform:scale(0) rotate(0); }
9 % {nepriehľadnosť: 0; -o-transform:scale(0) rotate(0); }
13 % {nepriehľadnosť:1; -o-transform:scale(1) rotácia (-360°); }
35 % {nepriehľadnosť: 1; -o-transform:scale(1) rotácia (-360°); }
38 % {nepriehľadnosť: 0; -o-transform:mierka(1,8) otáčanie (-540°); }
100% {nepriehľadnosť:0; -o-transform:scale(0) rotate(0); }
}
.ani-rotateTube{
animácia: ani-rotateTube 20s ease-in-out nekonečne;
-webkit-animation:ani-rotateTube 20s ease-in-out nekonečne;
-o-animation:ani-rotateTube 20s ease-in-out nekonečne;
}
@keyframes ani-rotateTube{
0% {nepriehľadnosť:0; transform:scale(0) rotate(0); }
35 % {nepriehľadnosť: 0; transform:scale(0) rotate(0); }
40 % {nepriehľadnosť: 1; transform:scale(1) rotovať (-360°); }
60 % {nepriehľadnosť:1; transform:scale(1) rotovať (-360°); }
100 % {nepriehľadnosť:1; transform:scale(1) rotovať (-360°); }
}
@-webkit-keyframes ani-rotateTube{
0% {nepriehľadnosť:0; -webkit-transform:scale(0) rotate(0); }
35 % {nepriehľadnosť: 0; -webkit-transform:scale(0) rotate(0); }
40 % {nepriehľadnosť: 1; -webkit-transform:scale(1) rotate(-360°); }
60 % {nepriehľadnosť:1; -webkit-transform:scale(1) rotate(-360°); }
100 % {nepriehľadnosť:1; -webkit-transform:scale(1) rotate(-360°); }
}
@-o-keyframes ani-rotateTube{
0% {nepriehľadnosť:0; -o-transform:scale(0) rotate(0); }
35 % {nepriehľadnosť: 0; -o-transform:scale(0) rotate(0); }
40 % {nepriehľadnosť: 1; -o-transform:scale(1) rotácia (-360°); }
60 % {nepriehľadnosť:1; -o-transform:scale(1) rotácia (-360°); }
100 % {nepriehľadnosť:1; -o-transform:scale(1) rotácia (-360°); }
}
.ani-tieň{
animácia: ani-shadow 20s lineárne nekonečné;
-webkit-animation:ani-shadow 20s lineárne nekonečné;
-o-animation:ani-shadow 20s lineárne nekonečné;
}
@keyframes ani-shadow{
0% {nepriehľadnosť:0; box-shadow:žiadne; }
58 % {nepriehľadnosť: 0; box-shadow:žiadne; }
64 % {nepriehľadnosť: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 0 44px #a6a6a6,0 0 0 46px #000; }
87 % {nepriehľadnosť: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 0 44px #a6a6a6,0 0 0 46px #000; }
90 % {nepriehľadnosť: 0; box-shadow:žiadne; }
100% {nepriehľadnosť:0; box-shadow:žiadne; }
}
@-webkit-keyframes ani-shadow{
0% {nepriehľadnosť:0; box-shadow:žiadne; }
58 % {nepriehľadnosť: 0; box-shadow:žiadne; }
64 % {nepriehľadnosť: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 0 44px #a6a6a6,0 0 0 46px #000; }
87 % {nepriehľadnosť: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 0 44px #a6a6a6,0 0 0 46px #000; }
90 % {nepriehľadnosť: 0; box-shadow:žiadne; }
100% {nepriehľadnosť:0; box-shadow:žiadne; }
}
@-o-keyframes ani-shadow{
0% {nepriehľadnosť:0; box-shadow:žiadne; }
58 % {nepriehľadnosť: 0; box-shadow:žiadne; }
64 % {nepriehľadnosť: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 0 44px #a6a6a6,0 0 0 46px #000; }
87 % {nepriehľadnosť: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 0 44px #a6a6a6,0 0 0 46px #000; }
90 % {nepriehľadnosť: 0; box-shadow:žiadne; }
100% {nepriehľadnosť:0; box-shadow:žiadne; }
}
.ani-úzky,.ani-zoom,.ani-otočnýHook,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
režim vyplnenia animácie:dopredu;
-webkit-animation-fill-mode:obaja;
-o-animation-fill-mode:oba;
}
</style>
</head>
<body>
<div class="container">
<!-- ľavé oko začína - >
<div class="eyesBoxs pullLeft">
<div class="profile skewLeft"></div>
<div class="shadow skewLeft"></div>
<div class="basic ani-narrow"></div>
<div class="eyes 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>
<!-- koniec ľavého oka - >
<!-- pravé oko začína - >
<div class="eyesBoxs pullRight">
<div class="profile skewRight"></div>
<div class="shadow skewRight"></div>
<div class="basic ani-narrow"></div>
<div class="eyes 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>
<!-- pravé oko - >
</div>
</body>
[/</html>mw_shl_code]
|
Zverejnené 14. 11. 2014 17:55:02
|
|
|
|
Prenajímateľ|
Zverejnené 14. 11. 2014 17:57:04
|
Zverejnené 14. 11. 2014 17:58:15
|
