[mw_shl_code=css,True] <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<type de estilo="texto/css">
*{margem:0; Enchimento de Acolchoamento: 0; }
.container{ width:750px; altura: 200px; margem:30px auto; transbordamento: escondido; Contexto:#000; posição: relativo; }
.eyesBoxs{width:130px; altura: 70px; posição: absoluta; topo: 50px; }
.pullLeft{left:100px; }
.pullRight{right:100px; }
.profile{
largura: 130px;
altura: 70px;
Contexto:#fff;
posição: absoluta;
Top:0;
esquerda:0;
transbordamento: escondido;
raio de borda: 0 70px 0 50px;
}
.shadow{
display:block;
largura: 130px;
altura: 70px;
posição: absoluta;
Top:0;
índice z:5;
raio de borda: 0 90px 0 60px;
box-shadow:5px 12px 2px 5px RGB (0,0,0,25) inserção;
}
.skewLeft{
transformação:skewX(15graus);
-webkit-transformação:skewX(15grau);
-o-transformada:skewX(15grau);
}
.skewRight{
transformação: skewX(-15grau) escala(-1,1);
-transformação-webkit: skewX(-15grau) escala(-1,1);
-o-transformada:skewX(-15grau) escala(-1,1);
}
.basic{
largura: 60px;
altura: 60px;
Contexto:#000;
posição: absoluta;
topo: 50%;
esquerda: 50%;
Z-Índice:10;
margem-topo:-30px;
raio de borda: 60%;
}
.basic:before{
conteúdo:"";
display:block;
largura: 10px;
altura: 11px;
posição: absoluta;
esquerda:15px;
topo: 15px;
índice z: 100;
raio de borda: 60%;
imagem de fundo: gradiente radial(círculo, rgb(225,225,225), rgb(225,225,225), RGBA(225,225,225,0,9),RGB(225,225,0,3));
-webkit-imagem-fundo: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-imagem-fundo:radial-gradiente(círculo,rgb(225,225,225,225),rgb(225,225,225),rgba(225,225,225,0,9),rgba(225,225,225,0,3));
}
.pullLeft .basic{
margem-esquerda:-33px;
}
.pullRight .basic{
margem-esquerda:-27px;
}
.olhos{
largura: 55px;
altura: 55px;
Contexto:#ff0000;
posição: absoluta;
topo: 8px;
raio de borda: 60%;
box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;
}
.puxaEsquerdo .olhos{esquerda:35px; }
.puxaDireita .olhos{direita:35px; }
.olhos .line{
largura: 64%;
altura:64%;
Contexto:#ff0000;
posição: absoluta;
certo:0;
esquerda:0;
topo: 10px;
Margin:0 Auto;
raio de borda: 60%;
sombra-caixa:0 0 2px 0 #b20000 inserção;
}
.olhos .line:antes{
conteúdo:"";
display:block;
largura: 10px;
altura: 11px;
posição: absoluta;
esquerda:3px;
topo: 4px;
índice z: 100;
raio de borda: 60%;
imagem de fundo: gradiente radial(círculo, rgb(225,225,225), rgb(225,225,225), rgba(225,225,225,0,7), RGB(225,225,0,3));
-webkit-imagem-fundo:radial-gradiente(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0,7),rgba(225,225,225,0.3));
-o-imagem-fundo:radial-gradiente(círculo,rgb(225,225,225), rgb(225,225,225),rgba(225,225,225,0,7),rgba(225,225,225,0,3));
}
.olhos .line:after{
conteúdo:"";
display:block;
largura: 10px;
altura: 10px;
posição: absoluta;
Contexto:#000;
certo:0;
esquerda:-1px;
topo: 13px;
índice z: 100;
Margin:0 Auto;
raio de borda: 60%;
transformar: girar (150 graus);
-webkit-transformar: girar (150°);
-O-transformação: girar (150°);
Animação: Infinito de Facilidade de Entrada Colorida 20s;
-webkit-animação: cor 20s facilitação infinita;
-O-animação: cor 20s facilita entrada infinita;
}
@keyframes cor{
0%{background:#000; }
35%{contexto:#000; }
40%{contexto:#f00; }
100%{contexto:#f00; }
}
@-webkit-keyframes colour{
0%{background:#000; }
35%{contexto:#000; }
40%{contexto:#f00; }
100%{contexto:#f00; }
}
@-o-keyframes colour{
0%{background:#000; }
35%{contexto:#000; }
40%{contexto:#f00; }
100%{contexto:#f00; }
}
/*******三勾玉 开始*******/
.hook{
largura:92%;
altura:92%;
posição: absoluta;
certo:0;
esquerda:0;
topo: 5%;
Margin:0 Auto;
raio de borda: 60%;
}
.hook .bar{
display:block;
largura: 100%;
altura: 100%;
posição: absoluta;
esquerda:0;
Top:0;
raio de borda: 60%;
}
.hook .bar b{
display:block;
largura: 8px;
altura: 8px;
Contexto:#000;
posição: absoluta;
esquerda:0;
Inferior:0;
raio de borda: 60%;
}
.gancho .bar b:after{
conteúdo:"";
largura: 8px;
altura: 8px;
cor-borda: transparente transparente #000 transparente;
estilo borda: sólido;
largura da borda:0 0 5px 0;
posição: absoluta;
topo:-1px;
esquerda:-3px;
índice z: 100;
raio de borda: 0 0 0 70%;
transformar: girar (-75graus);
-webkit-transformar: girar(-75º);
-O-transformada: girar(-75°);
}
.gancho .bar:nh-child(1){
transformar: girar (10graus);
-webkit-transformar: girar (10º);
-O-transformada: girar (10graus);
}
.gancho .bar:nh-child(2){
transformar: girar (130graus);
-webkit-transformar: girar (130grau);
-O-transformada: girar (130°);
}
.gancho .bar:nh-child(3){
transformar: girar (250 graus);
-webkit-transformação: girar (250°);
-O-transformada: girar (250°);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
largura:93%;
altura:93%;
posição: absoluta;
certo:0;
esquerda:0px;
topo: 2px;
Margin:0 Auto;
Contexto:#000;
raio de borda: 60%;
}
.tube .bar{
display:block;
largura: 10px;
altura: 20px;
estilo borda: sólido;
largura da borda: 0 0 0 10px;
cor da borda: preto transparente transparente transparente;
posição: absoluta;
raio de borda: 100% 0 0 0;
}
.tube .bar:nh-child(1){
topo:-10px;
esquerda:2px;
transformar: girar (-10º);
}
.tube .bar:nh-child(2){
Bottom:0px;
Direita:-10px;
transformar: girar (105 graus);
-webkit-transformar: girar (105º);
-O-transformada: girar (105°);
}
.tube .bar:nh-child(3){
embaixo: -3px;
esquerda:-10px;
transformar: girar (235°);
-webkit-transformar: girar (235°);
-O-transformada: girar (235°);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
largura: 130px;
altura: 70px;
posição: absoluta;
transbordamento: escondido;
Top:0;
esquerda:0;
raio de borda: 0 70px 0 50px;
}
.trans .bar{
display:block;
largura:9px;
altura: 9px;
Contexto:#000;
posição: absoluta;
topo: 50%;
Z-índice:2;
margem:-4px 0 0 -4px;
raio de borda: 60%;
}
.trans .bar:after{
conteúdo:"";
display:block;
largura: 11px;
altura: 12px;
posição: absoluta;
topo:-13px;
esquerda:-13px;
índice z: 100;
raio de borda: 60%;
Contexto: RGBA (250,250,250,0,85);
}
.pullLeft .trans .bar{
transformação:skewX(-15º);
-transformação do webkit: skewX(-15º);
-o-transformação:skewX(-15°);
}
.pullLeftT.trans .bar{left:48%; }
.pullRight .trans .bar{
transformação: skewX(-15grau) escala(-1,1);
-transformação-webkit: skewX(-15grau) escala(-1,1);
-o-transformada:skewX(-15grau) escala(-1,1);
}
.pullRight .trans .bar{right:48%; }
/*******轮回眼 结束*******/
.ani-estreito{
animação: ani-narrow 20s ease-out infinite;
-webkit-animação: ani-narrow 20s facilidade infinita;
-O-animação:ani-estreito 20s facilidade infinita;
}
@keyframes ani-narrow{
0%{opacidade:1; transformação:escala(1); }
5%{opacidade:1; transformação:escala(1); }
10%{opacity:0; transformação:escala(0); }
87%{opacidade:0; transformação:escala(0); }
90%{opacidade:1; transformação:escala(1); }
100%{opacidade:1; transformação:escala(1); }
}
@-webkit-keyframes ani-narrow{
0%{opacidade:1; -webkit-transformação:escala(1); }
5%{opacidade:1; -webkit-transformação:escala(1); }
10%{opacity:0; -transformação do webkit:escala(0); }
87%{opacidade:0; -transformação do webkit:escala(0); }
90%{opacidade:1; -webkit-transformação:escala(1); }
100%{opacidade:1; -webkit-transformação:escala(1); }
}
@-o-keyframes ani-narrow{
0%{opacidade:1; -o-transformada:escala(1); }
5%{opacidade:1; -o-transformada:escala(1); }
10%{opacity:0; -o-transformada:escala(0); }
87%{opacidade:0; -o-transformada:escala(0); }
90%{opacidade:1; -o-transformada:escala(1); }
100%{opacidade:1; -o-transformada:escala(1); }
}
.ani-zoom{
animação: ani-zoom 20s linear infinito;
-webkit-animação: ani-zoom 20s linear infinito;
-O-animação: ANI-zoom 20s linear infinito;
}
@keyframes ani-zoom{
0%{opacidade:0; transformação:escala(0); }
5%{opacidade:0; transformação:escala(0); }
8%{opacidade:1; transformação:escala(1); }
60%{opacidade:1; transformação:escala(1); }
62%{opacidade:0; transformação:escala(1,5); }
100%{opacidade:0; transformação:escala(0); }
}
@-webkit-keyframes ani-zoom{
0%{opacidade:0; -transformação do webkit:escala(0); }
5%{opacidade:0; -transformação do webkit:escala(0); }
8%{opacidade:1; -webkit-transformação:escala(1); }
60%{opacidade:1; -webkit-transformação:escala(1); }
62%{opacidade:0; -webkit-transformação:escala(1,5); }
100%{opacidade:0; -transformação do webkit:escala(0); }
}
@-o-keyframes ani-zoom{
0%{opacidade:0; -o-transformada:escala(0); }
5%{opacidade:0; -o-transformada:escala(0); }
8%{opacidade:1; -o-transformada:escala(1); }
60%{opacidade:1; -o-transformada:escala(1); }
62%{opacidade:0; -O-transformada:escala(1,5); }
100%{opacidade:0; -o-transformada:escala(0); }
}
.ani-rotateHook{
animação: ani-giração, gancho 20s facilitando infinito;
-webkit-animação: ani-girar Gancho 20s facilitando infinito;
-o-animação:ani-girar Gancho 20s facilitando infinito;
}
@keyframes ani-rotateHook{
0%{opacidade:0; transformar:escala(0) girar(0); }
9%{opacity:0; transformar:escala(0) girar(0); }
13%{opacidade:1; transformar:escala(1) girar(-360graus); }
35%{opacidade:1; transformar:escala(1) girar(-360graus); }
38%{opacidade:0; transformar:escala(1,8) girar(-540grau); }
100%{opacidade:0; transformar:escala(0) girar(0); }
}
@-webkit-keyframes ani-rotateHook{
0%{opacidade:0; -transformação do webkit: escala(0) rotação(0); }
9%{opacity:0; -transformação do webkit: escala(0) rotação(0); }
13%{opacidade:1; -webkit-transformação: escala(1) rotação(-360grau); }
35%{opacidade:1; -webkit-transformação: escala(1) rotação(-360grau); }
38%{opacidade:0; -webkit-transformação: escala(1,8) rotação(-540grau); }
100%{opacidade:0; -transformação do webkit: escala(0) rotação(0); }
}
@-o-keyframes ani-rotateHook{
0%{opacidade:0; -o-transformada:escala(0) girar(0); }
9%{opacity:0; -o-transformada:escala(0) girar(0); }
13%{opacidade:1; -o-transformada: escala(1) girar(-360grau); }
35%{opacidade:1; -o-transformada: escala(1) girar(-360grau); }
38%{opacidade:0; -O-transformação: escala(1,8) girar(-540grau); }
100%{opacidade:0; -o-transformada:escala(0) girar(0); }
}
.ani-rotateTube{
animação: ani-girar Tube 20s para facilitar a entrada infinita;
-animação-webkit: ani-girar Tube 20s facilitando entrada e saída infinita;
-o-animação:ani-girar Tube 20s para facilitar a saída infinita;
}
@keyframes ani-rotateTube{
0%{opacidade:0; transformar:escala(0) girar(0); }
35%{opacidade:0; transformar:escala(0) girar(0); }
40%{opacidade:1; transformar:escala(1) girar(-360graus); }
60%{opacidade:1; transformar:escala(1) girar(-360graus); }
100%{opacidade:1; transformar:escala(1) girar(-360graus); }
}
@-webkit-keyframes ani-rotateTube{
0%{opacidade:0; -transformação do webkit: escala(0) rotação(0); }
35%{opacidade:0; -transformação do webkit: escala(0) rotação(0); }
40%{opacidade:1; -webkit-transformação: escala(1) rotação(-360grau); }
60%{opacidade:1; -webkit-transformação: escala(1) rotação(-360grau); }
100%{opacidade:1; -webkit-transformação: escala(1) rotação(-360grau); }
}
@-o-keyframes ani-rotateTube{
0%{opacidade:0; -o-transformada:escala(0) girar(0); }
35%{opacidade:0; -o-transformada:escala(0) girar(0); }
40%{opacidade:1; -o-transformada: escala(1) girar(-360grau); }
60%{opacidade:1; -o-transformada: escala(1) girar(-360grau); }
100%{opacidade:1; -o-transformada: escala(1) girar(-360grau); }
}
.ani-sombra{
animação: ani-shadow 20s linear infinite;
-webkit-animação: ani-sombra 20s linear infinite;
-O-animação:ani-sombra 20s linear infinito;
}
@keyframes ani-sombra{
0%{opacidade:0; sombra-caixa: nenhuma; }
58%{opacidade:0; sombra-caixa: nenhuma; }
64%{opacidade: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%{opacidade: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%{opacity:0; sombra-caixa: nenhuma; }
100%{opacidade:0; sombra-caixa: nenhuma; }
}
@-webkit-keyframes ani-shadow{
0%{opacidade:0; sombra-caixa: nenhuma; }
58%{opacidade:0; sombra-caixa: nenhuma; }
64%{opacidade: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%{opacidade: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%{opacity:0; sombra-caixa: nenhuma; }
100%{opacidade:0; sombra-caixa: nenhuma; }
}
@-o-keyframes ani-shadow{
0%{opacidade:0; sombra-caixa: nenhuma; }
58%{opacidade:0; sombra-caixa: nenhuma; }
64%{opacidade: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%{opacidade: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%{opacity:0; sombra-caixa: nenhuma; }
100%{opacidade:0; sombra-caixa: nenhuma; }
}
.ani-estreito, .ani-zoom, .ani-gira Hook,
.ani-girarTube,.ani-sombra,.olhos .line:after{
modo de preenchimento de animação: para frente;
-webkit-animação-modo preenchimento:ambos;
-o-animation-preenchimento-modo:ambos;
}
</style>
</head>
<body>
<div class="container">
<!-- olho esquerdo começa - >
<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="linha">
<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>
<!-- extremidade do olho esquerdo - >
<!-- começa o olho direito - >
<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="linha">
<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>
<!-- pontas do olho direito - >
</div>
</body>
[/</html>mw_shl_code]
|
Publicado em 14/11/2014 17:55:02
|
|
|
|
Senhorio|
Publicado em 14/11/2014 17:57:04
|
Publicado em 14/11/2014 17:58:15
|
