[mw_shl_code=css,true] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; tömnázás: 0; }
.container{ width:750px; magasság: 200px; margó: 30px automata; túlcsordul: rejtve; háttér:#000; pozíció: relatív pozíció; }
.eyesBoxs{width:130px; magasság: 70px; pozíció: abszolút; top:50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
szélesség: 130px;
magasság: 70px;
Háttér:#fff;
pozíció: abszolút;
top:0;
bal: 0;
túlcsordul: rejtve;
szélsőtávolság: 0 70px 0 50px;
}
.shadow{
display:block;
szélesség: 130px;
magasság: 70px;
pozíció: abszolút;
top:0;
z-index:5;
szélsőtávolság:0 90px 0 60px;
box-shadow:5px 12px 2px 5px RGBA(0,0,0,.25) beágyazás;
}
.skewLeft{
transform:skewX(15°C);
-webkit-transform:skewX(15°);
-o-transform:skewX(15°);
}
.skewRight{
transform:skewX(-15°) scale(-1,1);
-webkit-transform:skewX(-15°) scale(-1,1);
-o-transzformáció:ferdeX(-15°) skála(-1,1);
}
.basic{
szélesség: 60px;
magasság: 60px;
háttér:#000;
pozíció: abszolút;
top:50%;
bal: 50%;
z-index:10;
margin-top:-30px;
határsugar: 60%;
}
.basic:before{
tartalom:"";
display:block;
szélesség: 10px;
magasság: 11px;
pozíció: abszolút;
bal: 15px;
top: 15px;
z-index:100;
határsugar: 60%;
háttérkép: radial-gradient(circle,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(circle,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(circle,RGB(225,225,225),RGB(225,225,225),rgba(225,225,225,0,9),rgba(225,225,225,0,3));
}
.pullLeft .basic{
bal margó:-33px;
}
.pullRight .basic{
bal margó: -27px;
}
.eyes{
szélesség: 55px;
magasság: 55px;
Háttér:#ff0000;
pozíció: abszolút;
top:8px;
határsugar: 60%;
box-shadow:0 0 2px 4px #bd0000 beágyúzva, 0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
szélesség: 64%;
magasság: 64%;
Háttér:#ff0000;
pozíció: abszolút;
Jobb:0;
bal: 0;
top:10px;
Margin:0 automata;
határsugar: 60%;
box-shadow:0 0 2px 0 #b20000 beágyúzva;
}
.eyes .line:before{
tartalom:"";
display:block;
szélesség: 10px;
magasság: 11px;
pozíció: abszolút;
bal: 3px;
top:4px;
z-index:100;
határsugar: 60%;
Háttérkép: radial-gradient(circle,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-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));
}
.eyes .line:after{
tartalom:"";
display:block;
szélesség: 10px;
magasság: 10px;
pozíció: abszolút;
háttér:#000;
Jobb:0;
balra:-1px;
top: 13px;
z-index:100;
Margin:0 automata;
határsugar: 60%;
transform:forgat(150°C);
-webkit-transform:rotate(150°C);
-o-transzformáció: forgatás (150°C);
Animáció: Colour 20s könnyedség-végtelen;
-webkit-animation:colour 20s ease-in infinite;
-o-animáció: színes 20-as könnyű-végtelen;
}
@keyframes szín{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{background:#f00; }
}
@-webkit-keyframes colour{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{background:#f00; }
}
@-o-keyframes colour{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{background:#f00; }
}
/*******三勾玉 开始*******/
.hook{
szélesség: 92%;
magasság: 92%;
pozíció: abszolút;
Jobb:0;
bal: 0;
csúcs:5%;
Margin:0 automata;
határsugar: 60%;
}
.hook .bar{
display:block;
szélesség: 100%;
magasság: 100%;
pozíció: abszolút;
bal: 0;
top:0;
határsugar: 60%;
}
.hook .bar b{
display:block;
szélesség: 8px;
magasság: 8px;
háttér:#000;
pozíció: abszolút;
bal: 0;
bottom:0;
határsugar: 60%;
}
.hook .bar b:after{
tartalom:"";
szélesség: 8px;
magasság: 8px;
border-color:átlátszó átlátszó #000 átlátszó;
border-style:solid;
szegélyszélesség: 0 0 5px 0;
pozíció: abszolút;
felül:-1px;
balra:-3px;
z-index:100;
határsugar: 0 0 0 70%;
transzformálás: forgatás(-75°C);
-webkit-transform:rotate(-75°C);
-o-transzformálás: forgatás(-75°C);
}
.hook .bar:nth-child(1){
transform:forgatás(10°C);
-webkit-transform:rotate(10°C);
-o-transzformálás: forgatás(10°C);
}
.hook .bar:nth-child(2){
transform:forgat(130°C);
-webkit-transform:rotate(130°C);
-o-transzformálás: forgatás(130°C);
}
.hook .bar:nth-child(3){
transform:forgat(250°C);
-webkit-transform:rotate(250°C);
-o-transzformáció: forgatás (250°C);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
szélesség: 93%;
magasság: 93%;
pozíció: abszolút;
Jobb:0;
bal: 0px;
top:2px;
Margin:0 automata;
háttér:#000;
határsugar: 60%;
}
.tube .bar{
display:block;
szélesség: 10px;
magasság: 20px;
border-style:solid;
szegélyszélesség: 0 0 0 10px;
border-color:átlátszó, átlátszó, átlátszó, áttetsző fekete;
pozíció: abszolút;
határsugar: 100% 0 0 0;
}
.tube .bar:nth-child(1){
felül:-10px;
bal: 2px;
transform:rotate(-10°C);
}
.tube .bar:nth-child(2){
alsó: 0px;
jobbra:-10px;
transform:rotate(105°);
-webkit-transform:rotate(105°C);
-o-transzformáció: forgat(105°);
}
.tube .bar:nth-child(3){
alul:-3px;
balra:-10px;
transformáció: forgatás(235°);
-webkit-transform:rotate(235°C);
-o-transzformálás: forgatás(235°);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
szélesség: 130px;
magasság: 70px;
pozíció: abszolút;
túlcsordul: rejtve;
top:0;
bal: 0;
szélsőtávolság: 0 70px 0 50px;
}
.trans .bar{
display:block;
szélesség: 9px;
magasság: 9px;
háttér:#000;
pozíció: abszolút;
top:50%;
z-index:2;
margó: -4px 0 0 -4px;
határsugar: 60%;
}
.trans .bar:after{
tartalom:"";
display:block;
szélesség: 11px;
magasság: 12px;
pozíció: abszolút;
felül:-13px;
bal: 13px;
z-index:100;
határsugar: 60%;
Háttér: RGBA(250,250,250,.85);
}
.pullLeft .trans .bar{
transform:skewX(-15°C);
-webkit-transform:skewX(-15°);
-o-transform:skewX(-15°);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
transform:skewX(-15°) scale(-1,1);
-webkit-transform:skewX(-15°) scale(-1,1);
-o-transzformáció:ferdeX(-15°) skála(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-keskeny{
animáció: ANI-Szűk, 20-as évekbeli könnyítés végtelen;
-webkit-animation:ani-Narrow 20-as évek könnyítései végtelen;
-o-animáció:ani-szűk 20-as évek végtelen könnyítése;
}
@keyframes ani-narrow{
0%{opacity:1; transform:scale(1); }
5%{opacity:1; transform:scale(1); }
10%{opacity:0; transform:scale(0); }
87%{opacity:0; transform:scale(0); }
90%{opacity:1; transform:scale(1); }
100%{opacity:1; transform:scale(1); }
}
@-webkit-keyframes ani-narrow{
0%{opacity:1; -webkit-transform:scale(1); }
5%{opacity:1; -webkit-transform:scale(1); }
10%{opacity:0; -webkit-transform:scale(0); }
87%{opacity:0; -webkit-transform:scale(0); }
90%{opacity:1; -webkit-transform:scale(1); }
100%{opacity:1; -webkit-transform:scale(1); }
}
@-o-keyframes ani-narrow{
0%{opacity:1; -o-transzformáció:scale(1); }
5%{opacity:1; -o-transzformáció:scale(1); }
10%{opacity:0; -o-transzformáció:scale(0); }
87%{opacity:0; -o-transzformáció:scale(0); }
90%{opacity:1; -o-transzformáció:scale(1); }
100%{opacity:1; -o-transzformáció:scale(1); }
}
.ani-zoom{
animáció: ani-zoom 20s lineáris végtelen;
-webkit-animation:ani-zoom 20s lineáris végtelen;
-o-animáció: ani-zoom 20s lineáris végtelen;
}
@keyframes ani-zoom{
0%{opacity:0; transform:scale(0); }
5%{opacity:0; transform:scale(0); }
8%{opacity:1; transform:scale(1); }
60%{opacity:1; transform:scale(1); }
62%{opacity:0; transform:scale(1,5); }
100%{opacity:0; transform:scale(0); }
}
@-webkit-keyframes ani-zoom{
0%{opacity:0; -webkit-transform:scale(0); }
5%{opacity:0; -webkit-transform:scale(0); }
8%{opacity:1; -webkit-transform:scale(1); }
60%{opacity:1; -webkit-transform:scale(1); }
62%{opacity:0; -webkit-transform:scale(1.5); }
100%{opacity:0; -webkit-transform:scale(0); }
}
@-o-keyframes ani-zoom{
0%{opacity:0; -o-transzformáció:scale(0); }
5%{opacity:0; -o-transzformáció:scale(0); }
8%{opacity:1; -o-transzformáció:scale(1); }
60%{opacity:1; -o-transzformáció:scale(1); }
62%{opacity:0; -o-transzformáció:scale(1,5); }
100%{opacity:0; -o-transzformáció:scale(0); }
}
.ani-rotateHook{
animáció:ani-rotateHook 20s könnyedén végtelen;
-webkit-animation:ani-rotateHook 20s ease-in infinite;
-o-animation:ani-rotateHook 20s könnyedség-be-végtelen;
}
@keyframes ani-rotateHook{
0%{opacity:0; transform:scale(0) rotate(0); }
9%{opacity:0; transform:scale(0) rotate(0); }
13%{opacity:1; transform:scale(1) rotate(-360°C); }
35%{opacity:1; transform:scale(1) rotate(-360°C); }
38%{opacity:0; transzformáció:méret(1,8) forgatás(-540°C); }
100%{opacity:0; transform:scale(0) rotate(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{opacity:0; -webkit-transform:scale(0) rotate(0); }
9%{opacity:0; -webkit-transform:scale(0) rotate(0); }
13%{opacity:1; -webkit-transform:scale(1) rotate(-360°C); }
35%{opacity:1; -webkit-transform:scale(1) rotate(-360°C); }
38%{opacity:0; -webkit-transform:scale(1.8) rotate(-540°C); }
100%{opacity:0; -webkit-transform:scale(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
0%{opacity:0; -o-transzformálás:scale(0) rotate(0); }
9%{opacity:0; -o-transzformálás:scale(0) rotate(0); }
13%{opacity:1; -o-transzformáció:scale(1) rotate(-360°); }
35%{opacity:1; -o-transzformáció:scale(1) rotate(-360°); }
38%{opacity:0; -o-transzformáció:skála(1,8) forgatás(-540°C); }
100%{opacity:0; -o-transzformálás:scale(0) rotate(0); }
}
.ani-rotateTube{
animáció: ani-rotateTube 20s könnyedén be-ki, végtelen;
-webkit-animation:ani-rotateTube 20s könnyedén be-ki-végtelen;
-o-animation:ani-rotateTube 20s könnyedén be-ki-végtelen;
}
@keyframes ani-rotateTube{
0%{opacity:0; transform:scale(0) rotate(0); }
35%{opacity:0; transform:scale(0) rotate(0); }
40%{opacity:1; transform:scale(1) rotate(-360°C); }
60%{opacity:1; transform:scale(1) rotate(-360°C); }
100%{opacity:1; transform:scale(1) rotate(-360°C); }
}
@-webkit-keyframes ani-rotateTube{
0%{opacity:0; -webkit-transform:scale(0) rotate(0); }
35%{opacity:0; -webkit-transform:scale(0) rotate(0); }
40%{opacity:1; -webkit-transform:scale(1) rotate(-360°C); }
60%{opacity:1; -webkit-transform:scale(1) rotate(-360°C); }
100%{opacity:1; -webkit-transform:scale(1) rotate(-360°C); }
}
@-o-keyframes ani-rotateTube{
0%{opacity:0; -o-transzformálás:scale(0) rotate(0); }
35%{opacity:0; -o-transzformálás:scale(0) rotate(0); }
40%{opacity:1; -o-transzformáció:scale(1) rotate(-360°); }
60%{opacity:1; -o-transzformáció:scale(1) rotate(-360°); }
100%{opacity:1; -o-transzformáció:scale(1) rotate(-360°); }
}
.ani-árnyék{
animáció: ANI-árnyék 20-as lineáris végtelen;
-webkit-animation:ani-shadow 20s lineáris végtelen;
-o-animáció:ani-shadow 20s lineáris végtelen;
}
@keyframes ani-shadow{
0%{opacity:0; box-shadow:none; }
58%{opacity:0; box-shadow:none; }
64%{opacity: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 44px #a6a6a6,0 0 0 46px #000; }
87%{opacity: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 44px #a6a6a6,0 0 0 46px #000; }
90%{opacity:0; box-shadow:none; }
100%{opacity:0; box-shadow:none; }
}
@-webkit-keyframes ani-shadow{
0%{opacity:0; box-shadow:none; }
58%{opacity:0; box-shadow:none; }
64%{opacity: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 44px #a6a6a6,0 0 0 46px #000; }
87%{opacity: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 44px #a6a6a6,0 0 0 46px #000; }
90%{opacity:0; box-shadow:none; }
100%{opacity:0; box-shadow:none; }
}
@-o-keyframes ani-shadow{
0%{opacity:0; box-shadow:none; }
58%{opacity:0; box-shadow:none; }
64%{opacity: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 44px #a6a6a6,0 0 0 46px #000; }
87%{opacity: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 44px #a6a6a6,0 0 0 46px #000; }
90%{opacity:0; box-shadow:none; }
100%{opacity:0; box-shadow:none; }
}
.ani-keskeny,.ani-zoom,.ani-forgatásHook,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
animáció-fill-mode:forwards;
-webkit-animation-fill-mode:mindkettő;
-o-animation-fill-mode:mindkettő;
}
</style>
</head>
<body>
<div class="container">
<!-- bal szem kezdődik - >
<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>
<!-- bal szem vége - >
<!-- a jobb szem kezdődik - >
<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>
<!-- jobb szem vége - >
</div>
</body>
[/</html>mw_shl_code]
|
Közzétéve 2014. 11. 14. 17:55:02
|
|
|
|
Háziúr|
Közzétéve 2014. 11. 14. 17:57:04
|
Közzétéve 2014. 11. 14. 17:58:15
|
