[mw_shl_code=CSS,True] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0; acolchado:0; }
.container{ width:750px; Altura: 200px; margen:30px automático; desbordamiento: oculto; antecedentes:#000; posición: relativo; }
.eyesBoxs{ancho:130px; altura: 70px; posición: absoluta; top:50px; }
.pullLeft{left:100px; }
.pullDerecha{derecha:100px; }
.profile{
ancho:130px;
altura: 70px;
Antecedentes:#fff;
posición: absoluta;
Top:0;
izquierda:0;
desbordamiento: oculto;
Radio de frontera: 0 70px 0 50px;
}
.shadow{
pantalla:bloqueo;
ancho:130px;
altura: 70px;
posición: absoluta;
Top:0;
Z-índice:5;
Radio de frontera: 0 90px 0 60px;
Sombra-caja:5px 12px 2px 5px RGB (0,0,0,25) inserto;
}
.skewLeft{
transformación:skewX(15º);
-webkit-transformación:skewX(15º);
-o-transformada:skewX(15º);
}
.skewRight{
transformada: skewX(-15grado) escala(-1,1);
-webkit-transformación: skewX(-15grado) escala(-1,1);
-o-transformada:skewX(-15grado) escala(-1,1);
}
.basic{
ancho:60px;
Altura: 60px;
antecedentes:#000;
posición: absoluta;
top:50%;
izquierda:50%;
z-índice:10;
margen-arriba:-30px;
radio de frontera: 60%;
}
.basic:before{
contenido:"";
pantalla:bloqueo;
ancho:10px;
Altura: 11px;
posición: absoluta;
izquierda:15px;
Top: 15 px;
Z-índice:100;
radio de frontera: 60%;
Imagen de fondo: Gradiente radial (círculo, RGB(225,225,225), RGB(225,225,225), RGBA(225,225,225,0,9),RGB(225,225,225,0,3));
-webkit-imagen-fondo:radial-gradiente(círculo,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0,9), rgba(225,225,225,0,3));
-o-imagen-fondo:radial-gradiente(círculo,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
}
.pullLeft .basic{
margen-izquierda:-33px;
}
.pullRight .basic{
margen-izquierda:-27px;
}
.eyes{
ancho:55px;
Altura: 55px;
Antecedentes:#ff0000;
posición: absoluta;
top:8px;
radio de frontera: 60%;
caja-sombra:0 0 2px 4px #bd0000 inserto,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px; }
.pullDerecho .eyes{derecha:35px; }
.ojos .line{
ancho:64%;
altura:64%;
Antecedentes:#ff0000;
posición: absoluta;
correcto:0;
izquierda:0;
top:10px;
marje:0 auto;
radio de frontera: 60%;
sombra-caja:0 0 2px 0 #b20000 inserto;
}
.eyes .line:before{
contenido:"";
pantalla:bloqueo;
ancho:10px;
Altura: 11px;
posición: absoluta;
izquierda:3px;
top:4px;
Z-índice:100;
radio de frontera: 60%;
Imagen de fondo: Radial-gradiente(círculo, RGB(225,225,225),RGB(225,225,225),RGB(225,225,225,0,7),RGB(225,225,0,3));
-webkit-imagen-fondo:radial-gradiente(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
-o-imagen-fondo:radial-gradiente(círculo,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
}
.eyes .line:after{
contenido:"";
pantalla:bloqueo;
ancho:10px;
Altura: 10px;
posición: absoluta;
antecedentes:#000;
correcto:0;
izquierda:-1px;
arriba: 13 px;
Z-índice:100;
marje:0 auto;
radio de frontera: 60%;
transformar: rotar (150 grados);
-webkit-transformación: rotar (150 grados);
-O-transformada: rotar (150 grados);
Animación: Infinito de Entrada Fácil de los 20 en color;
-webkit-animación: color 20s facilidad de entrada infinita;
-o-animación: color 20s facilidad de entrada infinita;
}
@keyframes color{
0%{antecedentes:#000; }
35%{background:#000; }
40%{antecedentes:#f00; }
100%{antecedentes:#f00; }
}
@-webkit-keyframes color{
0%{antecedentes:#000; }
35%{background:#000; }
40%{antecedentes:#f00; }
100%{antecedentes:#f00; }
}
@-o-keyframes color{
0%{antecedentes:#000; }
35%{background:#000; }
40%{antecedentes:#f00; }
100%{antecedentes:#f00; }
}
/*******三勾玉 开始*******/
.hook{
ancho:92%;
altura:92%;
posición: absoluta;
correcto:0;
izquierda:0;
top:5%;
marje:0 auto;
radio de frontera: 60%;
}
.hook .bar{
pantalla:bloqueo;
ancho:100%;
altura: 100%;
posición: absoluta;
izquierda:0;
Top:0;
radio de frontera: 60%;
}
.hook .bar b{
pantalla:bloqueo;
ancho:8px;
Altura: 8px;
antecedentes:#000;
posición: absoluta;
izquierda:0;
Bottom:0;
radio de frontera: 60%;
}
.hook .bar b:after{
contenido:"";
ancho:8px;
Altura: 8px;
color-borde:transparente transparente #000 transparente;
estilo borde: sólido;
ancho de borde:0 0 5px 0;
posición: absoluta;
top:-1px;
izquierda:-3px;
Z-índice:100;
radio de frontera: 0 0 0 70%;
transformar: rotar (-75º);
-webkit-transformación: rotar (-75 grados);
-O-transformada: rotar (-75 grados);
}
.hook .bar:nh-child(1){
transformar: rotar (10º);
-webkit-transformación: rotar (10º);
-o-transformada: rotar (10 grados);
}
.hook .bar:nh-child(2){
transformar: rotar (130 grados);
-webkit-transformación: rotar (130 grados);
-O-transformada: rotar (130 grados);
}
.hook .bar:nh-child(3){
transformar: rotar (250 grados);
-webkit-transformación: rotar (250 grados);
-O-transformada: rotar (250 grados);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
ancho:93%;
altura:93%;
posición: absoluta;
correcto:0;
izquierda:0px;
top:2px;
marje:0 auto;
antecedentes:#000;
radio de frontera: 60%;
}
.tube .bar{
pantalla:bloqueo;
ancho:10px;
Altura: 20px;
estilo borde: sólido;
ancho de borde:0 0 0 10px;
color del borde: transparente, transparente, transparente y transparente negro;
posición: absoluta;
radio de frontera: 100% 0 0 0;
}
.tube .bar:nh-child(1){
top:-10px;
izquierda:2px;
transformar: rotar (-10º);
}
.tube .bar:nh-child(2){
bottom:0px;
derecha:-10px;
transformar: rotar (105 grados);
-webkit-transformación: rotar (105 grados);
-O-transformada: rotar (105 grados);
}
.tube .bar:nh-child(3){
abajo:-3px;
izquierda:-10px;
transformar: rotar (235 grados);
-webkit-transformación: rotar (235 grados);
-O-transformada: rotar (235 grados);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
ancho:130px;
altura: 70px;
posición: absoluta;
desbordamiento: oculto;
Top:0;
izquierda:0;
Radio de frontera: 0 70px 0 50px;
}
.trans .bar{
pantalla:bloqueo;
ancho:9px;
Altura: 9px;
antecedentes:#000;
posición: absoluta;
top:50%;
z-index:2;
margen:-4px 0 0 -4px;
radio de frontera: 60%;
}
.trans .bar:after{
contenido:"";
pantalla:bloqueo;
ancho:11px;
Altura: 12px;
posición: absoluta;
arriba:-13px;
izquierda:-13px;
Z-índice:100;
radio de frontera: 60%;
antecedentes: RGBA (250,250,250,0,85);
}
.pullIzquierda .trans .bar{
transformación:skewX(-15º);
-webkit-transformación:skewX(-15º);
-o-transformada:skewX(-15º);
}
.pullLeft .trans .bar{left:48%; }
.pullRight .trans .bar{
transformada: skewX(-15grado) escala(-1,1);
-webkit-transformación: skewX(-15grado) escala(-1,1);
-o-transformada:skewX(-15grado) escala(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-narrow{
animación: ani-narrow 20s ease-out infinite;
-webkit-animación: ani-narrow 20s facilidad de salida infinita;
-o-animación:ani-narrow 20s ease-out infinite;
}
@keyframes ani-narrow{
0%{opacidad:1; transformación:escala(1); }
5%{opacidad:1; transformación:escala(1); }
10%{opacidad:0; transformación:escala(0); }
87%{opacidad:0; transformación:escala(0); }
90%{opacidad:1; transformación:escala(1); }
100%{opacidad:1; transformación:escala(1); }
}
@-webkit-keyframes ani-narrow{
0%{opacidad:1; -webkit-transformación:escala(1); }
5%{opacidad:1; -webkit-transformación:escala(1); }
10%{opacidad:0; -webkit-transformación:escala(0); }
87%{opacidad:0; -webkit-transformación:escala(0); }
90%{opacidad:1; -webkit-transformación:escala(1); }
100%{opacidad:1; -webkit-transformación:escala(1); }
}
@-o-keyframes ani-narrow{
0%{opacidad:1; -o-transformada:escala(1); }
5%{opacidad:1; -o-transformada:escala(1); }
10%{opacidad:0; -o-transformada:escala(0); }
87%{opacidad:0; -o-transformada:escala(0); }
90%{opacidad:1; -o-transformada:escala(1); }
100%{opacidad:1; -o-transformada:escala(1); }
}
.ani-zoom{
animación: ani-zoom lineal infinito de 20s;
-webkit-animación: ani-zoom 20s lineal infinito;
-O-animación: Ani-Zoom 20s lineal infinito;
}
@keyframes ani-zoom{
0%{opacidad:0; transformación:escala(0); }
5%{opacidad:0; transformación:escala(0); }
8%{opacidad:1; transformación:escala(1); }
60%{opacidad:1; transformación:escala(1); }
62%{opacidad:0; transformación:escala(1,5); }
100%{opacidad:0; transformación:escala(0); }
}
@-webkit-keyframes ani-zoom{
0%{opacidad:0; -webkit-transformación:escala(0); }
5%{opacidad:0; -webkit-transformación:escala(0); }
8%{opacidad:1; -webkit-transformación:escala(1); }
60%{opacidad:1; -webkit-transformación:escala(1); }
62%{opacidad:0; -webkit-transformación:escala(1.5); }
100%{opacidad:0; -webkit-transformación:escala(0); }
}
@-o-keyframes ani-zoom{
0%{opacidad:0; -o-transformada:escala(0); }
5%{opacidad:0; -o-transformada:escala(0); }
8%{opacidad:1; -o-transformada:escala(1); }
60%{opacidad:1; -o-transformada:escala(1); }
62%{opacidad:0; -o-transformada:escala(1,5); }
100%{opacidad:0; -o-transformada:escala(0); }
}
.ani-rotateHook{
animación: ani-girar Gancho 20s infinito;
-webkit-animación: ani-rotaciónHook 20s facilidad infinita;
-o-animación:ani-rotarHook 20s de entrada fácil infinito;
}
@keyframes ani-rotateHook{
0%{opacidad:0; transformar:escala(0) rotar(0); }
9%{opacidad:0; transformar:escala(0) rotar(0); }
13%{opacidad:1; transformar:escala(1) rotar(-360º); }
35%{opacidad:1; transformar:escala(1) rotar(-360º); }
38%{opacidad:0; transformación:escala(1,8) rotación(-540º); }
100%{opacidad:0; transformar:escala(0) rotar(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{opacidad:0; -webkit-transformación:escala(0) rotar(0); }
9%{opacidad:0; -webkit-transformación:escala(0) rotar(0); }
13%{opacidad:1; -webkit-transformación: escala(1) rotación(-360º); }
35%{opacidad:1; -webkit-transformación: escala(1) rotación(-360º); }
38%{opacidad:0; -webkit-transformación: escala(1,8) rotación(-540º); }
100%{opacidad:0; -webkit-transformación:escala(0) rotar(0); }
}
@-o-keyframes ani-rotateHook{
0%{opacidad:0; -o-transformada:escala(0) rotar(0); }
9%{opacidad:0; -o-transformada:escala(0) rotar(0); }
13%{opacidad:1; -o-transformada: escala(1) rotar(-360°); }
35%{opacidad:1; -o-transformada: escala(1) rotar(-360°); }
38%{opacidad:0; -o-transformada: escala(1,8) rotación(-540º); }
100%{opacidad:0; -o-transformada:escala(0) rotar(0); }
}
.ani-rotateTube{
animación: ani-girar Tubo 20 con salida fácil infinita;
-webkit-animación: ani-girar Tube 20s para facilitar la entrada infinita;
-o-animación:ani-girar Tube 20s para facilitar la entrada infinita;
}
@keyframes ani-rotateTube{
0%{opacidad:0; transformar:escala(0) rotar(0); }
35%{opacidad:0; transformar:escala(0) rotar(0); }
40%{opacidad:1; transformar:escala(1) rotar(-360º); }
60%{opacidad:1; transformar:escala(1) rotar(-360º); }
100%{opacidad:1; transformar:escala(1) rotar(-360º); }
}
@-webkit-keyframes ani-rotateTube{
0%{opacidad:0; -webkit-transformación:escala(0) rotar(0); }
35%{opacidad:0; -webkit-transformación:escala(0) rotar(0); }
40%{opacidad:1; -webkit-transformación: escala(1) rotación(-360º); }
60%{opacidad:1; -webkit-transformación: escala(1) rotación(-360º); }
100%{opacidad:1; -webkit-transformación: escala(1) rotación(-360º); }
}
@-o-keyframes ani-rotateTube{
0%{opacidad:0; -o-transformada:escala(0) rotar(0); }
35%{opacidad:0; -o-transformada:escala(0) rotar(0); }
40%{opacidad:1; -o-transformada: escala(1) rotar(-360°); }
60%{opacidad:1; -o-transformada: escala(1) rotar(-360°); }
100%{opacidad:1; -o-transformada: escala(1) rotar(-360°); }
}
.ani-sombra{
animación: ani-shadow 20s lineal infinito;
-webkit-animación: ani-sombra 20s lineal infinito;
-o-animación:ani-sombra 20s lineal infinito;
}
@keyframes ani-shadow{
0%{opacidad:0; sombra-caja: ninguna; }
58%{opacidad:0; sombra-caja: ninguna; }
64%{opacidad: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%{opacidad: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%{opacidad:0; sombra-caja: ninguna; }
100%{opacidad:0; sombra-caja: ninguna; }
}
@-webkit-keyframes ani-shadow{
0%{opacidad:0; sombra-caja: ninguna; }
58%{opacidad:0; sombra-caja: ninguna; }
64%{opacidad: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%{opacidad: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%{opacidad:0; sombra-caja: ninguna; }
100%{opacidad:0; sombra-caja: ninguna; }
}
@-o-keyframes ani-shadow{
0%{opacidad:0; sombra-caja: ninguna; }
58%{opacidad:0; sombra-caja: ninguna; }
64%{opacidad: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%{opacidad: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%{opacidad:0; sombra-caja: ninguna; }
100%{opacidad:0; sombra-caja: ninguna; }
}
.ani-estrecho, .ani-zoom, .ani-gira Hook,
.ani-rotar Tubo, .ani-sombra,.ojos .line:after{
modo de relleno de animación: hacia adelante;
-webkit-animación-modo de relleno:ambos;
-o-animation-fill-mode:ambos;
}
</style>
</head>
<body>
<div class="container">
<!-- ojo izquierdo comienza - >
<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-sombra"></span>
</div>
</div>
<!-- extremo del ojo izquierdo - >
<!-- comienza el ojo derecho - >
<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-sombra"></span>
</div>
</div>
<!-- extremos del ojo derecho - >
</div>
</body>
[/</html>mw_shl_code]
|
Publicado en 14/11/2014 17:55:02
|
|
|
|
Propietario|
Publicado en 14/11/2014 17:57:04
|
Publicado en 14/11/2014 17:58:15
|
