[mw_shl_code=css,vero] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="testo/css">
*{margin:0; ribottitura:0; }
.container{ width:750px; Altezza: 200px; margine:30px auto; Sovraplesso: nascosto; Contesto:#000; posizione: relativo; }
.eyesBoxs{width:130px; altezza: 70px; posizione: assoluta; top: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
larghezza: 130px;
altezza: 70px;
Contesto:#fff;
posizione: assoluta;
Top:0;
sinistra:0;
Sovraplesso: nascosto;
raggio di confine: 0 70px 0 50px;
}
.shadow{
display:block;
larghezza: 130px;
altezza: 70px;
posizione: assoluta;
Top:0;
Z-indice:5;
raggio di confine: 0 90px 0 60px;
box-shadow:5px 12px 2px 5px rgba(0,0,0,25) incast;
}
.skewLeft{
trasformazione:skewX(15°);
-webkit-trasformazione:skewX(15°);
-o-trasformata: skewX(15°);
}
.skewRight{
trasformazione: skewX(-15grad) scala(-1,1);
-trasformata-webkit: skewX(-15grad) scala(-1,1);
-o-trasformata: skewX(-15grad) scala(-1,1);
}
.basic{
larghezza: 60px;
altezza: 60px;
Contesto:#000;
posizione: assoluta;
top: 50%;
sinistra: 50%;
Z-indice:10;
margine-superiore:-30px;
raggio di confine: 60%;
}
.basic:before{
contenuto:"";
display:block;
larghezza: 10px;
altezza: 11px;
posizione: assoluta;
sinistra: 15px;
Testa: 15 px;
z-indice:100;
raggio di confine: 60%;
Immagine di sfondo: Radiale-gradiente(cerchio,rgb(225,225,225), rgb(225,225,225), RGBA(225,225,225,0,9), RGB(225,225,0.3));
-webkit-sfondo-immagine:radiale-gradiente(cerchio,rgb(225,225,225),rgb(225,225,225,225,225,0,9),rgba(225,225,225,0.3));
-o-immagine-sfondo:radiale-gradiente(cerchio,rgb(225,225,225),rgb(225,225,225), rgba(225,225,225,0.9), rgba(225,225,225,0.3));
}
.pullLeft .basic{
margine-sinistra:-33px;
}
.pullRight .basic{
margine-sinistra:-27px;
}
.eyes{
larghezza: 55px;
altezza: 55px;
Contesto:#ff0000;
posizione: assoluta;
Top: 8px;
raggio di confine: 60%;
Ombra-scato:0 0 2px 4px #bd0000 incast,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullRight .eyes{right:35px; }
.occhi .linea{
larghezza: 64%;
altezza:64%;
Contesto:#ff0000;
posizione: assoluta;
giusto:0;
sinistra:0;
top:10px;
margine:0 auto;
raggio di confine: 60%;
ombra-scato:0 0 2px 0 #b20000 inserito;
}
.eyes .line:before{
contenuto:"";
display:block;
larghezza: 10px;
altezza: 11px;
posizione: assoluta;
sinistra: 3px;
in cima: 4px;
z-indice:100;
raggio di confine: 60%;
Immagine di sfondo: Radial-gradiente(cerchio,rgb(225,225,225), rgb(225,225,225),RGB(225,225,225,0.7),RGB(225,225,0.3));
-webkit-immagine-sfondo:radiale-gradiente(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7), rgba(225,225,225,0.3));
-o-immagine-sfondo:radiale-gradiente(cerchio,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7), rgba(225,225,225,0.3));
}
.occhi .line:dopo{
contenuto:"";
display:block;
larghezza: 10px;
altezza: 10px;
posizione: assoluta;
Contesto:#000;
giusto:0;
sinistra:-1px;
Top: 13px;
z-indice:100;
margine:0 auto;
raggio di confine: 60%;
trasformazione: ruota (150°);
-webkit-trasformazione: ruota (150°);
-O-trasformata: ruota (150°);
Animazione: Colori 20s Facilità di Ingresso Infinito;
-webkit-animazione: colori 20s facilità-inserimento infinito;
-o-animazione: colore 20s facilitato di ingresso infinito;
}
@keyframes colore{
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{
larghezza:92%;
altezza:92%;
posizione: assoluta;
giusto:0;
sinistra:0;
top: 5%;
margine:0 auto;
raggio di confine: 60%;
}
.uncino .bar{
display:block;
larghezza: 100%;
altezza: 100%;
posizione: assoluta;
sinistra:0;
Top:0;
raggio di confine: 60%;
}
.uncino .bar b{
display:block;
larghezza:8px;
altezza:8px;
Contesto:#000;
posizione: assoluta;
sinistra:0;
Bottom:0;
raggio di confine: 60%;
}
.uncino .bar b:dopo{
contenuto:"";
larghezza:8px;
altezza:8px;
colore del bordo: trasparente trasparente #000 trasparente;
stile bordo: solido;
larghezza del bordo:0 0 5px 0;
posizione: assoluta;
in cima:-1px;
sinistra:-3px;
z-indice:100;
raggio di confine: 0 0 0 70%;
trasformazione: ruota (-75°);
-webkit-trasformazione: ruota (-75°);
-O-trasformata: ruotare (-75°);
}
.uncino .bar:nth-child(1){
trasformazione: ruota (10°);
-webkit-trasformazione: ruota (10grad);
-O-trasformata: ruota (10°);
}
.hook .bar:nth-child(2){
trasformazione: rotazione (130°);
-webkit-trasformazione: ruota (130°);
-O-trasformata: ruota (130°);
}
.uncino .bar:n-child(3){
trasformazione: rotazione (250°);
-webkit-trasformazione: ruota (250°);
-O-trasformata: ruota (250°);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
larghezza: 93%;
altezza:93%;
posizione: assoluta;
giusto:0;
sinistra:0px;
top: 2px;
margine:0 auto;
Contesto:#000;
raggio di confine: 60%;
}
.tube .bar{
display:block;
larghezza: 10px;
Altezza: 20px;
stile bordo: solido;
larghezza del bordo: 0 0 0 10px;
colore del bordo: nero trasparente trasparente;
posizione: assoluta;
raggio di confine: 100% 0 0 0;
}
.tube .bar:nth-child(1){
in cima: -10px;
sinistra: 2px;
trasformazione: ruota (-10grad);
}
.tube .bar:nh-child(2){
bottom:0px;
Destra:-10px;
trasformazione: ruota (105°);
-webkit-trasformazione: ruota (105°);
-O-trasformata: ruota (105°);
}
.tubo .bar:n-child(3){
in fondo:-3px;
sinistra:-10px;
trasformazione: ruota (235°);
-webkit-trasformazione: ruota (235°);
-O-trasformata: ruota (235°);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
larghezza: 130px;
altezza: 70px;
posizione: assoluta;
Sovraplesso: nascosto;
Top:0;
sinistra:0;
raggio di confine: 0 70px 0 50px;
}
.trans .bar{
display:block;
larghezza: 9px;
altezza: 9px;
Contesto:#000;
posizione: assoluta;
top: 50%;
z-indice:2;
margine:-4px 0 0 -4px;
raggio di confine: 60%;
}
.trans .bar:dopo{
contenuto:"";
display:block;
larghezza: 11px;
altezza: 12px;
posizione: assoluta;
in cima:-13px;
sinistra:-13px;
z-indice:100;
raggio di confine: 60%;
Contesto: RGBA (250,250,250,0,85);
}
.pullLeft .trans .bar{
trasformazione: skewX(-15grad);
-webkit-trasformazione:skewX(-15°);
-o-trasformata:skewX(-15°);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
trasformazione: skewX(-15grad) scala(-1,1);
-trasformata-webkit: skewX(-15grad) scala(-1,1);
-o-trasformata: skewX(-15grad) scala(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-stretto{
animazione: ani-narrow 20s ease-out infinite;
-webkit-animazione: ani-narrow 20s ease-out infinite;
-o-animation:ani-narrow 20s ease-out infinite;
}
@keyframes ani-narrow{
0%{opacità:1; trasformazione:scala(1); }
5%{opacità:1; trasformazione:scala(1); }
10%{opacità:0; trasformazione:scala(0); }
87%{opacità:0; trasformazione:scala(0); }
90%{opacità:1; trasformazione:scala(1); }
100%{opacità:1; trasformazione:scala(1); }
}
@-webkit-keyframes ani-narrow{
0%{opacità:1; -webkit-trasformazione: scala(1); }
5%{opacità:1; -webkit-trasformazione: scala(1); }
10%{opacità:0; -trasformazione webkit: scala(0); }
87%{opacità:0; -trasformazione webkit: scala(0); }
90%{opacità:1; -webkit-trasformazione: scala(1); }
100%{opacità:1; -webkit-trasformazione: scala(1); }
}
@-o-keyframes ani-narrow{
0%{opacità:1; -o-trasformata:scala(1); }
5%{opacità:1; -o-trasformata:scala(1); }
10%{opacità:0; -o-trasformata:scala(0); }
87%{opacità:0; -o-trasformata:scala(0); }
90%{opacità:1; -o-trasformata:scala(1); }
100%{opacità:1; -o-trasformata:scala(1); }
}
.ani-zoom{
animazione: ani-zoom lineare infinito da 20s;
-webkit-animazione: ani-zoom 20s lineare infinito;
-O-Animation: ANI-zoom 20s lineare infinito;
}
@keyframes ani-zoom{
0%{opacità:0; trasformazione:scala(0); }
5%{opacity:0; trasformazione:scala(0); }
8%{opacità:1; trasformazione:scala(1); }
60%{opacità:1; trasformazione:scala(1); }
62%{opacità:0; trasformazione:scala(1,5); }
100%{opacità:0; trasformazione:scala(0); }
}
@-webkit-keyframes ani-zoom{
0%{opacità:0; -trasformazione webkit: scala(0); }
5%{opacity:0; -trasformazione webkit: scala(0); }
8%{opacità:1; -webkit-trasformazione: scala(1); }
60%{opacità:1; -webkit-trasformazione: scala(1); }
62%{opacità:0; -webkit-trasformazione:scala(1,5); }
100%{opacità:0; -trasformazione webkit: scala(0); }
}
@-o-keyframes ani-zoom{
0%{opacità:0; -o-trasformata:scala(0); }
5%{opacity:0; -o-trasformata:scala(0); }
8%{opacità:1; -o-trasformata:scala(1); }
60%{opacità:1; -o-trasformata:scala(1); }
62%{opacità:0; -O-trasformata:scala(1,5); }
100%{opacità:0; -o-trasformata:scala(0); }
}
.ani-rotateHook{
animazione: ani-ruota Hook 20s facilita infinito;
-webkit-animazione: ani-ruota Gancio 20s facilitando l'inserimento infinito;
-o-animation:ani-ruota Hook 20s facilita l'inserimento infinito;
}
@keyframes ani-rotateHook{
0%{opacità:0; trasformare:scala(0) ruotare(0); }
9%{opacità:0; trasformare:scala(0) ruotare(0); }
13%{opacità:1; trasformazione:scala(1) ruotare(-360°); }
35%{opacità:1; trasformazione:scala(1) ruotare(-360°); }
38%{opacità:0; trasformazione:scala(1,8) rotazione(-540grad); }
100%{opacità:0; trasformare:scala(0) ruotare(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{opacità:0; -webkit-trasformata:scala(0) ruota(0); }
9%{opacità:0; -webkit-trasformata:scala(0) ruota(0); }
13%{opacità:1; -webkit-trasformazione: scale(1) ruotare(-360°); }
35%{opacità:1; -webkit-trasformazione: scale(1) ruotare(-360°); }
38%{opacità:0; -webkit-trasformazione: scala(1,8) ruota(-540grad); }
100%{opacità:0; -webkit-trasformata:scala(0) ruota(0); }
}
@-o-keyframes ani-rotateHook{
0%{opacità:0; -o-trasformata:scala(0) ruotare(0); }
9%{opacità:0; -o-trasformata:scala(0) ruotare(0); }
13%{opacità:1; -o-trasformata: scala(1) ruota(-360°); }
35%{opacità:1; -o-trasformata: scala(1) ruota(-360°); }
38%{opacità:0; -o-trasformata: scala(1,8) ruota(-540grad); }
100%{opacità:0; -o-trasformata:scala(0) ruotare(0); }
}
.ani-rotateTube{
animazione: ani-rotate, infinito il facilitatto di uscita del tubo 20;
-webkit-animazione: ani-ruota Tube 20s facilita l'uscita infinita;
-o-animation:ani-ruota Tube 20s facilita l'uscita infinita;
}
@keyframes ani-rotateTube{
0%{opacità:0; trasformare:scala(0) ruotare(0); }
35%{opacità:0; trasformare:scala(0) ruotare(0); }
40%{opacità:1; trasformazione:scala(1) ruotare(-360°); }
60%{opacità:1; trasformazione:scala(1) ruotare(-360°); }
100%{opacità:1; trasformazione:scala(1) ruotare(-360°); }
}
@-webkit-keyframes ani-rotateTube{
0%{opacità:0; -webkit-trasformata:scala(0) ruota(0); }
35%{opacità:0; -webkit-trasformata:scala(0) ruota(0); }
40%{opacità:1; -webkit-trasformazione: scale(1) ruotare(-360°); }
60%{opacità:1; -webkit-trasformazione: scale(1) ruotare(-360°); }
100%{opacità:1; -webkit-trasformazione: scale(1) ruotare(-360°); }
}
@-o-keyframes ani-rotateTube{
0%{opacità:0; -o-trasformata:scala(0) ruotare(0); }
35%{opacità:0; -o-trasformata:scala(0) ruotare(0); }
40%{opacità:1; -o-trasformata: scala(1) ruota(-360°); }
60%{opacità:1; -o-trasformata: scala(1) ruota(-360°); }
100%{opacità:1; -o-trasformata: scala(1) ruota(-360°); }
}
.ani-ombra{
animazione: ani-shadow 20s lineare infinito;
-webkit-animazione: ani-shadow 20s lineare infinito;
-O-Animation:Ani-Ombra 20s lineare infinito;
}
@keyframes ani-shadow{
0%{opacità:0; ombra-scatola: nessuna; }
58%{opacità:0; ombra-scatola: nessuna; }
64%{opacità: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%{opacità: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%{opacità:0; ombra-scatola: nessuna; }
100%{opacità:0; ombra-scatola: nessuna; }
}
@-webkit-keyframes ani-shadow{
0%{opacità:0; ombra-scatola: nessuna; }
58%{opacità:0; ombra-scatola: nessuna; }
64%{opacità: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%{opacità: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%{opacità:0; ombra-scatola: nessuna; }
100%{opacità:0; ombra-scatola: nessuna; }
}
@-o-keyframes ani-shadow{
0%{opacità:0; ombra-scatola: nessuna; }
58%{opacità:0; ombra-scatola: nessuna; }
64%{opacità: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%{opacità: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%{opacità:0; ombra-scatola: nessuna; }
100%{opacità:0; ombra-scatola: nessuna; }
}
.ani-stretto, .ani-zoom, .ani-ruota Uncino,
.ani-ruotareTube,.ani-ombra,.occhi .line:after{
modalità di riempimento animazione: in avanti;
-webkit-animazione-modalità riempimento:entrambe;
-o-animation-fill-mode:entrambi;
}
</style>
</head>
<body>
<div class="container">
<!-- occhio sinistro inizia - >
<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-ombra"></span>
</div>
</div>
<!-- estremità dell'occhio sinistro - >
<!-- l'occhio destro inizia - >
<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-ombra"></span>
</div>
</div>
<!-- estremità dell'occhio destro - >
</div>
</body>
[/</html>mw_shl_code]
|
Pubblicato su 14/11/2014 17:55:02
|
|
|
|
Padrone di casa|
Pubblicato su 14/11/2014 17:57:04
|
Pubblicato su 14/11/2014 17:58:15
|
