[mw_shl_code=css, sant] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{marginal:0; utfyllning: 0; }
.container{ width:750px; höjd: 200 px; marginal: 30 px automat; överflöd: dolt; Bakgrund: #000; position: relativ; }
.eyesBoxs{width:130px; höjd: 70 px; Position: absolut; topp: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
bredd: 130 px;
höjd: 70 px;
Bakgrund: #fff;
Position: absolut;
topp:0;
vänster:0;
överflöd: dolt;
gränsradie:0 70px 0 50px;
}
.shadow{
display:block;
bredd: 130 px;
höjd: 70 px;
Position: absolut;
topp:0;
z-index: 5;
gränsradie:0 90px 0 60px;
box-skugga: 5px 12px 2px 5px rgba(0,0,0,.25) infällt;
}
.skewLeft{
transform:skewX(15°);
-webkit-transform:skewX(15°);
-o-transform:skewX(15°);
}
.skewRight{
transform: skewX(-15°) skala(-1,1);
-webkit-transform: skewX(-15°) skala(-1,1);
-o-transform:skewX(-15°) skala(-1,1);
}
.basic{
bredd: 60px;
höjd: 60 px;
Bakgrund: #000;
Position: absolut;
topp: 50%;
vänster: 50%;
z-index: 10;
margin-top:-30px;
gränsradie: 60%;
}
.basic:före{
innehåll:"";
display:block;
bredd: 10 px;
höjd: 11 px;
Position: absolut;
vänster:15px;
topp: 15 px;
Z-index: 100;
gränsradie: 60%;
bakgrundsbild:radiell-gradient(cirkel,RGB(225,225,225),RGB(225,225,225),RGBA(225,225,225,0.9),RGBA(225,225,0.3));
-webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,0.9),rgba(225,225,0.3));
-o-bakgrundsbild:radiell-gradient(cirkel,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,0.3));
}
.pullLeft .basic{
margin-left:-33px;
}
.pullRight .basic{
margin-left:-27px;
}
.ögon{
bredd: 55 px;
höjd: 55 px;
Bakgrund: #ff0000;
Position: absolut;
topp: 8px;
gränsradie: 60%;
box-shadow:0 0 2px 4px #bd0000 infällt,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.eyes .line{
bredd: 64%;
höjd: 64%;
Bakgrund: #ff0000;
Position: absolut;
rätt:0;
vänster:0;
topp: 10 px;
marginal:0 auto;
gränsradie: 60%;
box-shadow:0 0 2px 0 #b20000 infällt;
}
.eyes .line:före{
innehåll:"";
display:block;
bredd: 10 px;
höjd: 11 px;
Position: absolut;
vänster: 3 px;
topp: 4px;
Z-index: 100;
gränsradie: 60%;
bakgrundsbild: radiell-gradient(cirkel,RGB(225,225,225),RGB(225,225,225),RGBA(225,225,0.7),RGBA(225,225,0.3));
-webkit-background-image:radial-gradient(circle,rgb(225,225,225),RGB(225,225,225),rgba(225,225,0.7),rgba(225,225,0.3));
-o-bakgrundsbild:radial-gradient(cirkel,rgb(225,225,225),RGB(225,225,225),rgba(225,225,225,0.7),rgba(225,225,0.3));
}
.eyes .line:after{
innehåll:"";
display:block;
bredd: 10 px;
höjd: 10 px;
Position: absolut;
Bakgrund: #000;
rätt:0;
vänster:-1px;
topp: 13 px;
Z-index: 100;
marginal:0 auto;
gränsradie: 60%;
transformera: rotera (150 grader);
-webkit-transform:rotera (150 grader);
-o-transform:rotera (150 grader);
Animation: Colour 20s Ease-In Infinite;
-webkit-animation: färg 20s lätta ingång oändligt;
-O-Animation: Colour 20s Ease In-in, oändlig;
}
@keyframes färg{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{bakgrund:#f00; }
}
@-webkit-keyframes colour{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{bakgrund:#f00; }
}
@-o-keyframes colour{
0%{background:#000; }
35%{background:#000; }
40%{background:#f00; }
100%{bakgrund:#f00; }
}
/*******三勾玉 开始*******/
.hook{
bredd: 92%;
höjd: 92%;
Position: absolut;
rätt:0;
vänster:0;
topp:5%;
marginal:0 auto;
gränsradie: 60%;
}
.hook .bar{
display:block;
bredd: 100%;
höjd: 100%;
Position: absolut;
vänster:0;
topp:0;
gränsradie: 60%;
}
.hook .bar b{
display:block;
bredd: 8 px;
Höjd: 8 px;
Bakgrund: #000;
Position: absolut;
vänster:0;
botten:0;
gränsradie: 60%;
}
.hook .bar b:efter{
innehåll:"";
bredd: 8 px;
Höjd: 8 px;
kantfärg:transparent transparent #000 transparent;
Kantstil: Solid;
gränsbredd:0 0 5px 0;
Position: absolut;
topp:-1px;
vänster: -3 px;
Z-index: 100;
gränsradie: 0 0 0 70%;
transformera: rotera (-75 grader);
-webkit-transform:rotate(-75°);
-o-transform:rotera(-75°);
}
.hook .bar:nth-child(1){
transformera: rotera (10 grader);
-webkit-transform:rotate(10 grader);
-o-transform:rotera(10 grader);
}
.hook .bar:nth-child(2){
transformera: rotera (130 grader);
-webkit-transform:rotate(130°);
-o-transform:rotera(130 grader);
}
.hook .bar:nth-child(3){
transformera: rotera (250 grader);
-webkit-transform:rotate(250°);
-o-transform:rotera (250 grader);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
bredd: 93%;
höjd: 93%;
Position: absolut;
rätt:0;
vänster:0px;
topp:2px;
marginal:0 auto;
Bakgrund: #000;
gränsradie: 60%;
}
.tube .bar{
display:block;
bredd: 10 px;
höjd: 20 px;
Kantstil: Solid;
border-width:0 0 0 10px;
Kantfärg: transparent, transparent, transparent svart;
Position: absolut;
gränsradie: 100% 0 0 0;
}
.tube .bar:nth-child(1){
topp:-10px;
vänster: 2 px;
transformera: rotera (-10 grader);
}
.tube .bar:nth-child(2){
botten:0px;
höger:-10px;
transformera: rotera (105 grader);
-webkit-transform:rotera(105°);
-o-transform:rotera (105°);
}
.tube .bar:nth-child(3){
Botten:-3 px;
vänster: -10px;
transformera: rotera (235 grader);
-webkit-transform:rotera(235°);
-o-transform:rotera (235°);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
bredd: 130 px;
höjd: 70 px;
Position: absolut;
överflöd: dolt;
topp:0;
vänster:0;
gränsradie:0 70px 0 50px;
}
.trans .bar{
display:block;
bredd: 9 px;
Höjd: 9 px;
Bakgrund: #000;
Position: absolut;
topp: 50%;
z-index: 2;
marginal: -4 px 0 0 -4px;
gränsradie: 60%;
}
.trans .bar:after{
innehåll:"";
display:block;
bredd: 11 px;
Höjd: 12 px;
Position: absolut;
topp:-13px;
vänster: -13px;
Z-index: 100;
gränsradie: 60%;
Bakgrund: 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{
transform: skewX(-15°) skala(-1,1);
-webkit-transform: skewX(-15°) skala(-1,1);
-o-transform:skewX(-15°) skala(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-smal{
Animation: ANI-smal 20-Smal Ease-out Infinite;
-webkit-animation:ani-smal 20-sekunders lätta ut oändligt;
-o-animation: ani-smal 20-S-lätta ut oändligt;
}
@keyframes ani-narrow{
0%{opacitet:1; transform:skala(1); }
5%{opacitet:1; transform:skala(1); }
10%{opacitet:0; transform:skala(0); }
87%{opacitet:0; transform:skala(0); }
90%{opacitet:1; transform:skala(1); }
100%{opacitet:1; transform:skala(1); }
}
@-webkit-keyframes ani-narrow{
0%{opacitet:1; -webkit-transform:scale(1); }
5%{opacitet:1; -webkit-transform:scale(1); }
10%{opacitet:0; -webkit-transform:scale(0); }
87%{opacitet:0; -webkit-transform:scale(0); }
90%{opacitet:1; -webkit-transform:scale(1); }
100%{opacitet:1; -webkit-transform:scale(1); }
}
@-o-keyframes ani-narrow{
0%{opacitet:1; -o-transform:skala(1); }
5%{opacitet:1; -o-transform:skala(1); }
10%{opacitet:0; -o-transform:skala(0); }
87%{opacitet:0; -o-transform:skala(0); }
90%{opacitet:1; -o-transform:skala(1); }
100%{opacitet:1; -o-transform:skala(1); }
}
.ani-zoom{
Animation: ani-zoom 20s linjära oändlighet;
-webkit-animation:ani-zoom 20-talets linjära oändlighet;
-o-animation: ani-zoom 20-sekunders linjär oändlig;
}
@keyframes ani-zoom{
0%{opacitet:0; transform:skala(0); }
5%{opacitet:0; transform:skala(0); }
8%{opacitet:1; transform:skala(1); }
60%{opacitet:1; transform:skala(1); }
62%{opacitet:0; transform: skala (1,5); }
100%{opacitet:0; transform:skala(0); }
}
@-webkit-keyframes ani-zoom{
0%{opacitet:0; -webkit-transform:scale(0); }
5%{opacitet:0; -webkit-transform:scale(0); }
8%{opacitet:1; -webkit-transform:scale(1); }
60%{opacitet:1; -webkit-transform:scale(1); }
62%{opacitet:0; -webkit-transform:skala(1,5); }
100%{opacitet:0; -webkit-transform:scale(0); }
}
@-o-keyframes ani-zoom{
0%{opacitet:0; -o-transform:skala(0); }
5%{opacitet:0; -o-transform:skala(0); }
8%{opacitet:1; -o-transform:skala(1); }
60%{opacitet:1; -o-transform:skala(1); }
62%{opacitet:0; -o-transform:skala(1,5); }
100%{opacitet:0; -o-transform:skala(0); }
}
.ani-rotateHook{
animation: ani-rotateHook 20s slow-in infinite;
-webkit-animation:ani-rotateKrok 20s ease-in infinite;
-o-animation:ani-rotateKrok 20s in-in-infinite;
}
@keyframes ani-rotateHook{
0%{opacitet:0; transformera: skala(0) rotera(0); }
9%{opacitet:0; transformera: skala(0) rotera(0); }
13%{opacitet:1; transformera: skala(1) rotera (-360 grader); }
35%{opacitet:1; transformera: skala(1) rotera (-360 grader); }
38%{opacitet:0; transformera: skala(1,8) rotera (-540 grader); }
100%{opacitet:0; transformera: skala(0) rotera(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{opacitet:0; -webkit-transform:scale(0) rotate(0); }
9%{opacitet:0; -webkit-transform:scale(0) rotate(0); }
13%{opacitet:1; -webkit-transform:skala(1) rotera(-360 grader); }
35%{opacitet:1; -webkit-transform:skala(1) rotera(-360 grader); }
38%{opacitet:0; -webkit-transform:skala(1,8) rotera(-540°); }
100%{opacitet:0; -webkit-transform:scale(0) rotate(0); }
}
@-o-keyframes ani-rotateHook{
0%{opacitet:0; -o-transform:skala(0) rotera(0); }
9%{opacitet:0; -o-transform:skala(0) rotera(0); }
13%{opacitet:1; -o-transform:skala(1) rotera(-360 grader); }
35%{opacitet:1; -o-transform:skala(1) rotera(-360 grader); }
38%{opacitet:0; -o-transform: skala(1,8) rotera (-540 grader); }
100%{opacitet:0; -o-transform:skala(0) rotera(0); }
}
.ani-rotateTube{
animation: 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%{opacitet:0; transformera: skala(0) rotera(0); }
35%{opacitet:0; transformera: skala(0) rotera(0); }
40%{opacitet:1; transformera: skala(1) rotera (-360 grader); }
60%{opacitet:1; transformera: skala(1) rotera (-360 grader); }
100%{opacitet:1; transformera: skala(1) rotera (-360 grader); }
}
@-webkit-keyframes ani-rotateTube{
0%{opacitet:0; -webkit-transform:scale(0) rotate(0); }
35%{opacitet:0; -webkit-transform:scale(0) rotate(0); }
40%{opacitet:1; -webkit-transform:skala(1) rotera(-360 grader); }
60%{opacitet:1; -webkit-transform:skala(1) rotera(-360 grader); }
100%{opacitet:1; -webkit-transform:skala(1) rotera(-360 grader); }
}
@-o-keyframes ani-rotateTube{
0%{opacitet:0; -o-transform:skala(0) rotera(0); }
35%{opacitet:0; -o-transform:skala(0) rotera(0); }
40%{opacitet:1; -o-transform:skala(1) rotera(-360 grader); }
60%{opacitet:1; -o-transform:skala(1) rotera(-360 grader); }
100%{opacitet:1; -o-transform:skala(1) rotera(-360 grader); }
}
.ani-shadow{
Animation: Ani-Shadow 20-talets linjära oändlighet;
-webkit-animation: ani-shadow 20-talets linjär oändlighet;
-o-animation: ani-shadow 20-talets linjär oändlighet;
}
@keyframes ani-shadow{
0%{opacitet:0; box-shadow: ingen; }
58%{opacitet:0; box-shadow: ingen; }
64%{opacitet:1; box-shadow:0 0 0 14px #46464646,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%{opacitet:1; box-shadow:0 0 0 14px #46464646,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%{opacitet:0; box-shadow: ingen; }
100%{opacitet:0; box-shadow: ingen; }
}
@-webkit-keyframes ani-shadow{
0%{opacitet:0; box-shadow: ingen; }
58%{opacitet:0; box-shadow: ingen; }
64%{opacitet:1; box-shadow:0 0 0 14px #46464646,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%{opacitet:1; box-shadow:0 0 0 14px #46464646,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%{opacitet:0; box-shadow: ingen; }
100%{opacitet:0; box-shadow: ingen; }
}
@-o-keyframes ani-shadow{
0%{opacitet:0; box-shadow: ingen; }
58%{opacitet:0; box-shadow: ingen; }
64%{opacitet:1; box-shadow:0 0 0 14px #46464646,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%{opacitet:1; box-shadow:0 0 0 14px #46464646,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%{opacitet:0; box-shadow: ingen; }
100%{opacitet:0; box-shadow: ingen; }
}
.ani-smalt, .ani-zoomat, .ani-roteraKrok,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
animation-fill-mode:framåt;
-webkit-animation-fill-mode: båda;
-o-animation-fill-mode: båda;
}
</style>
</head>
<body>
<div class="container">
<!-- vänstra öga börjar - >
<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">
<divklass="hook ani-rotateHook">
<span-klass="bar"><b></b></span>
<span-klass="bar"><b></b></span>
<span-klass="bar"><b></b></span>
</div>
<div class="tube ani-rotateTube">
<spann klass="bar"></span>
<spann klass="bar"></span>
<spann klass="bar"></span>
</div>
</div>
</div>
<div class="trans skewLeft">
<span-klass="förutom ani-skugga"></span>
</div>
</div>
<!-- änden av vänster öga - >
<!-- börjar höger öga – >
<div class="eyesBoxs pullRight">
<div class="profile skewRight"></div>
<divisionsklass="skuggskewRight"></div>
<div class="basic ani-narrow"></div>
<div class="eyes ani-zoom">
<div class="line">
<divklass="hook ani-rotateHook">
<span-klass="bar"><b></b></span>
<span-klass="bar"><b></b></span>
<span-klass="bar"><b></b></span>
</div>
<div class="tube ani-rotateTube">
<spann klass="bar"></span>
<spann klass="bar"></span>
<spann klass="bar"></span>
</div>
</div>
</div>
<div class="trans skewRight">
<span-klass="förutom ani-skugga"></span>
</div>
</div>
<!-- högra ögas slut - >
</div>
</body>
[/</html>mw_shl_code]
|
Publicerad på 2014-11-14 17:55:02
|
|
|
|
Hyresvärd|
Publicerad på 2014-11-14 17:57:04
|
Publicerad på 2014-11-14 17:58:15
|
