[mw_shl_code=css,vrai] < !doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin :0 ; Rembourrage : 0 ; }
.container{ width :750px ; taille : 200px ; marge : 30px auto ; débordement : caché ; contexte : #000 ; Position : Relatif ; }
.eyesBoxs{width :130px ; Taille : 70px ; position : absolue ; top : 50px ; }
.pullLeft{left :100px ; }
.pullRight{right :100px ; }
.profile{
largeur : 130px ;
Taille : 70px ;
Contexte : #fff ;
position : absolue ;
top :0 ;
gauche :0 ;
débordement : caché ;
rayon de bordure : 0 70px 0 50px ;
}
.shadow{
display :block ;
largeur : 130px ;
Taille : 70px ;
position : absolue ;
top :0 ;
Z-index :5 ;
rayon de bordure : 0 90px 0 60px ;
box-shadow : 5px 12px 2px 5px RGB (0,0,0,0,25) insertion ;
}
.skewLeft{
transformer : skewX (15 degrés) ;
-webkit-transformée : skewX (15 degrés) ;
-o-transformée : skewX (15 degrés) ;
}
.skewRight{
transformée : skewX(-15deg) échelle (-1,1) ;
-webkit-transform : skewX(-15deg) échelle (-1,1) ;
-o-transformée : skewX(-15deg) échelle (-1,1) ;
}
.basic{
largeur : 60px ;
Taille : 60px ;
contexte : #000 ;
position : absolue ;
top : 50 % ;
gauche : 50 % ;
Z-index : 10 ;
marge-haut : 30px ;
rayon de bordure : 60 % ;
}
.basic :avant{
contenu : « ; » ;
display :block ;
largeur : 10px ;
taille : 11 px ;
position : absolue ;
gauche : 15 px ;
top : 15px ;
Z-index : 100 ;
rayon de bordure : 60 % ;
image de fond : gradient radial (cercle, rgb(225,225,225), rgb(225,225,225), RGB(225,225,225,0,9), RGBA(225,225,0,3)) ;
-webkit-image-arrière-image : radial-gradient(circle,rgb(225,225,225),rgb(225,225,225,225,rgba(225,225,225,0.9),rgba(225,225,225,0,3)) ;
-o-image-arrière-arrière : 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{
marge-gauche :-33 px ;
}
.pullRight .basic{
marge-gauche :-27px ;
}
.eyes{
Largeur : 55px ;
taille : 55 px ;
Contexte : #ff0000 ;
position : absolue ;
top : 8px ;
rayon de bordure : 60 % ;
box-shadow : 0 0 2px 4px #bd0000 en insert, 0 0 0 2px #000 ;
}
.pullLeft.eyes{left :35px ; }
.pullRight .eyes{right :35px ; }
.yeux .line{
largeur : 64 % ;
taille : 64 % ;
Contexte : #ff0000 ;
position : absolue ;
Exact :0 ;
gauche :0 ;
top : 10px ;
marge : 0 automatique ;
rayon de bordure : 60 % ;
Ombre-boîte :0 0 2px 0 #b20000 insertion ;
}
.eyes .line :before{
contenu : « ; » ;
display :block ;
largeur : 10px ;
taille : 11 px ;
position : absolue ;
gauche : 3 px ;
top : 4px ;
Z-index : 100 ;
rayon de bordure : 60 % ;
image de fond : radial-gradient (circle, rgb(225,225,225), rgb(225,225,225),RGB(225,225,225,0,7), RGB(225,225,0,3)) ;
-webkit-image-arrière-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-image-arrière-arrière : radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7), RGB(225,225,225,0.3)) ;
}
.yeux .line :après{
contenu : « ; » ;
display :block ;
largeur : 10px ;
taille : 10px ;
position : absolue ;
contexte : #000 ;
Exact :0 ;
gauche : -1px ;
top : 13 px ;
Z-index : 100 ;
marge : 0 automatique ;
rayon de bordure : 60 % ;
transformer : tourner (150 degrés) ;
-webkit-transformer : tourner (150 degrés) ;
-O-transformée : tourner (150°) ;
animation : Infinie en mode d’entrée en couleur des années 20 ;
-webkit-animation : Colour 20s Easy-In Infinite ;
-O-Animation : Couleur 20s Facilité d’entrée infinie ;
}
@keyframes couleur{
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{
largeur : 92 % ;
taille : 92 % ;
position : absolue ;
Exact :0 ;
gauche :0 ;
top : 5 % ;
marge : 0 automatique ;
rayon de bordure : 60 % ;
}
.hook .bar{
display :block ;
largeur : 100 % ;
taille : 100 % ;
position : absolue ;
gauche :0 ;
top :0 ;
rayon de bordure : 60 % ;
}
.hook .bar b{
display :block ;
largeur : 8px ;
taille : 8px ;
contexte : #000 ;
position : absolue ;
gauche :0 ;
bottom : 0 ;
rayon de bordure : 60 % ;
}
.crochet .bar b :après{
contenu : « ; » ;
largeur : 8px ;
taille : 8px ;
couleur-bordure : transparent transparent #000 transparent ;
style bordure : solide ;
largeur de bordure : 0 0 5px 0 ;
position : absolue ;
top : -1px ;
gauche : -3px ;
Z-index : 100 ;
rayon de bordure : 0 0 0 70 % ;
transformer : tourner (-75 degrés) ;
-webkit-transformer : tourner (-75 degrés) ;
-O-transformée : pivoter (-75°) ;
}
.crochet .bar :nh-enfant(1){
transformer : tourner (10 degrés) ;
-webkit-transformer : pivoter (10 degrés) ;
-O-transformée : tourner (10 degrés) ;
}
.hook .bar :nh-child(2){
transformer : tourner (130 degrés) ;
-webkit-transformer : tourner (130 degrés) ;
-O-transformée : tourner (130°) ;
}
.crochet .bar :nh-enfant(3){
transformer : tourner (250 degrés) ;
-webkit-transformer : pivoter (250 degrés) ;
-O-transformée : tourner (250°) ;
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
largeur : 93 % ;
taille : 93 % ;
position : absolue ;
Exact :0 ;
gauche : 0px ;
top : 2px ;
marge : 0 automatique ;
contexte : #000 ;
rayon de bordure : 60 % ;
}
.tube .bar{
display :block ;
largeur : 10px ;
taille : 20px ;
style bordure : solide ;
largeur de bordure : 0 0 0 10px ;
couleur de bordure : transparent transparent transparent noir ;
position : absolue ;
rayon de frontière : 100 % 0 0 ;
}
.tube .bar :nh-child(1){
haut : -10px ;
gauche : 2 px ;
transformer : tourner (-10 degrés) ;
}
.tube .bar :nh-child(2){
bottom :0px ;
À droite : -10px ;
transformer : tourner (105 degrés) ;
-webkit-transformation : tourner (105 degrés) ;
-O-transformée : tourner (105 degrés) ;
}
.tube .bar :n-child(3){
bas : 3 pages ;
gauche : -10px ;
transformer : tourner (235 degrés) ;
-webkit-transformer : tourner (235 degrés) ;
-O-transformée : tourner (235 degrés) ;
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
largeur : 130px ;
Taille : 70px ;
position : absolue ;
débordement : caché ;
top :0 ;
gauche :0 ;
rayon de bordure : 0 70px 0 50px ;
}
.trans .bar{
display :block ;
largeur : 9px ;
taille : 9 px ;
contexte : #000 ;
position : absolue ;
top : 50 % ;
z-index :2 ;
marge : -4px 0 0 -4px ;
rayon de bordure : 60 % ;
}
.trans .bar :after{
contenu : « ; » ;
display :block ;
largeur : 11px ;
Taille : 12 px ;
position : absolue ;
top : -13px ;
gauche : -13 pages ;
Z-index : 100 ;
rayon de bordure : 60 % ;
Contexte : RGBA (250,250,250,0,85) ;
}
.pullLeftOut .trans .bar{
transformer : skewX (-15 degrés) ;
-webkit-transform : skewX (-15 degrés) ;
-o-transformée : skewX (-15 degrés) ;
}
.pullLeftT.trans .bar{left :48 %; }
.pullRight .trans .bar{
transformée : skewX(-15deg) échelle (-1,1) ;
-webkit-transform : skewX(-15deg) échelle (-1,1) ;
-o-transformée : skewX(-15deg) échelle (-1,1) ;
}
.pullRight .trans .bar{right :48 %; }
/*******轮回眼 结束*******/
.ani-étroit{
animation : ani-narrow 20s ease-out infinite ;
-webkit-animation : ani-narrow 20s ease-out infinite ;
-O-Animation : Ani-Narrow 20s Ease-out Infinite ;
}
@keyframes ani-narrow{
0 %{opacité :1 ; transformer :échelle(1) ; }
5 %{opacité :1 ; transformer :échelle(1) ; }
10 %{opacité :0 ; transformer : échelle (0) ; }
87 %{opacité :0 ; transformer : échelle (0) ; }
90 %{opacité :1 ; transformer :échelle(1) ; }
100 %{opacité :1 ; transformer :échelle(1) ; }
}
@-webkit-keyframes ani-narrow{
0 %{opacité :1 ; -webkit-transformée : échelle(1) ; }
5 %{opacité :1 ; -webkit-transformée : échelle(1) ; }
10 %{opacité :0 ; -webkit-transformée : échelle(0) ; }
87 %{opacité :0 ; -webkit-transformée : échelle(0) ; }
90 %{opacité :1 ; -webkit-transformée : échelle(1) ; }
100 %{opacité :1 ; -webkit-transformée : échelle(1) ; }
}
@-o-keyframes ani-narrow{
0 %{opacité :1 ; -o-transformée : échelle(1) ; }
5 %{opacité :1 ; -o-transformée : échelle(1) ; }
10 %{opacité :0 ; -o-transformée : échelle(0) ; }
87 %{opacité :0 ; -o-transformée : échelle(0) ; }
90 %{opacité :1 ; -o-transformée : échelle(1) ; }
100 %{opacité :1 ; -o-transformée : échelle(1) ; }
}
.ani-zoom{
animation : ANI-zoom 20s linéaire infini ;
-webkit-animation : ani-zoom 20s linéaire infini ;
-O-Animation : Ani-Zoom 20s linéaire infini ;
}
@keyframes ani-zoom{
0 %{opacité :0 ; transformer : échelle (0) ; }
5 %{opacity :0 ; transformer : échelle (0) ; }
8 %{opacité :1 ; transformer :échelle(1) ; }
60 %{opacité :1 ; transformer :échelle(1) ; }
62 %{opacité :0 ; transformer : échelle (1,5) ; }
100 %{opacité :0 ; transformer : échelle (0) ; }
}
@-webkit-keyframes ani-zoom{
0 %{opacité :0 ; -webkit-transformée : échelle(0) ; }
5 %{opacity :0 ; -webkit-transformée : échelle(0) ; }
8 %{opacité :1 ; -webkit-transformée : échelle(1) ; }
60 %{opacité :1 ; -webkit-transformée : échelle(1) ; }
62 %{opacité :0 ; -webkit-transformation : échelle (1,5) ; }
100 %{opacité :0 ; -webkit-transformée : échelle(0) ; }
}
@-o-keyframes ani-zoom{
0 %{opacité :0 ; -o-transformée : échelle(0) ; }
5 %{opacity :0 ; -o-transformée : échelle(0) ; }
8 %{opacité :1 ; -o-transformée : échelle(1) ; }
60 %{opacité :1 ; -o-transformée : échelle(1) ; }
62 %{opacité :0 ; -o-transform : échelle (1,5) ; }
100 %{opacité :0 ; -o-transformée : échelle(0) ; }
}
.ani-rotateHook{
animation : ani-rotation Hook 20s facilité infinie ;
-webkit-animation : ani-rotation Hook 20s facilité infini ;
-o-animation : ani-rotation Crochet 20s s’infiltration infinie ;
}
@keyframes ani-rotateHook{
0 %{opacité :0 ; transformer : échelle (0) rotation (0) ; }
9 %{opacité :0 ; transformer : échelle (0) rotation (0) ; }
13 %{opacity :1 ; transformer : échelle (1) rotation (-360 degrés) ; }
35 %{opacité :1 ; transformer : échelle (1) rotation (-360 degrés) ; }
38 %{opacité :0 ; transformer : échelle (1,8) tourner (-540 degrés) ; }
100 %{opacité :0 ; transformer : échelle (0) rotation (0) ; }
}
@-webkit-keyframes ani-rotateHook{
0 %{opacité :0 ; -webkit-transformer : échelle (0) rotation (0) ; }
9 %{opacité :0 ; -webkit-transformer : échelle (0) rotation (0) ; }
13 %{opacity :1 ; -webkit-transformer : échelle (1) rotation (-360 degrés) ; }
35 %{opacité :1 ; -webkit-transformer : échelle (1) rotation (-360 degrés) ; }
38 %{opacité :0 ; -webkit-transformation : échelle (1,8) rotation (-540 degrés) ; }
100 %{opacité :0 ; -webkit-transformer : échelle (0) rotation (0) ; }
}
@-o-keyframes ani-rotateHook{
0 %{opacité :0 ; -o-transformée : échelle (0) rotation (0) ; }
9 %{opacité :0 ; -o-transformée : échelle (0) rotation (0) ; }
13 %{opacity :1 ; -O-transformée : échelle(1) tourner (-360°) ; }
35 %{opacité :1 ; -O-transformée : échelle(1) tourner (-360°) ; }
38 %{opacité :0 ; -O-transformée : échelle (1,8) rotation (-540°) ; }
100 %{opacité :0 ; -o-transformée : échelle (0) rotation (0) ; }
}
.ani-rotateTube{
animation : ani-rotation Tube 20 infinie ;
-webkit-animation : ani-rotation Tube 20s infini pour sortir facilement ;
-o-animation : ani-rotation Tube 20s infini pour sortir facilement ;
}
@keyframes ani-rotateTube{
0 %{opacité :0 ; transformer : échelle (0) rotation (0) ; }
35 %{opacité :0 ; transformer : échelle (0) rotation (0) ; }
40 %{opacité :1 ; transformer : échelle (1) rotation (-360 degrés) ; }
60 %{opacité :1 ; transformer : échelle (1) rotation (-360 degrés) ; }
100 %{opacité :1 ; transformer : échelle (1) rotation (-360 degrés) ; }
}
@-webkit-keyframes ani-rotateTube{
0 %{opacité :0 ; -webkit-transformer : échelle (0) rotation (0) ; }
35 %{opacité :0 ; -webkit-transformer : échelle (0) rotation (0) ; }
40 %{opacité :1 ; -webkit-transformer : échelle (1) rotation (-360 degrés) ; }
60 %{opacité :1 ; -webkit-transformer : échelle (1) rotation (-360 degrés) ; }
100 %{opacité :1 ; -webkit-transformer : échelle (1) rotation (-360 degrés) ; }
}
@-o-keyframes ani-rotateTube{
0 %{opacité :0 ; -o-transformée : échelle (0) rotation (0) ; }
35 %{opacité :0 ; -o-transformée : échelle (0) rotation (0) ; }
40 %{opacité :1 ; -O-transformée : échelle(1) tourner (-360°) ; }
60 %{opacité :1 ; -O-transformée : échelle(1) tourner (-360°) ; }
100 %{opacité :1 ; -O-transformée : échelle(1) tourner (-360°) ; }
}
.ani-ombre{
animation : ani-shadow 20s lineary infinite ;
-webkit-animation : ani-shadow 20s linéaire infini ;
-O-Animation : Ani-Shadow 20s linéaire infini ;
}
@keyframes ani-ombre{
0 %{opacité :0 ; Ombre-boîte : aucune ; }
58 %{opacité :0 ; Ombre-boîte : aucune ; }
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 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 0 44px #a6a6a6,0 0 0 46px #000 ; }
90 %{opacité :0 ; Ombre-boîte : aucune ; }
100 %{opacité :0 ; Ombre-boîte : aucune ; }
}
@-webkit-keyframes ani-shadow{
0 %{opacité :0 ; Ombre-boîte : aucune ; }
58 %{opacité :0 ; Ombre-boîte : aucune ; }
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 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 0 44px #a6a6a6,0 0 0 46px #000 ; }
90 %{opacité :0 ; Ombre-boîte : aucune ; }
100 %{opacité :0 ; Ombre-boîte : aucune ; }
}
@-o-keyframes ani-shadow{
0 %{opacité :0 ; Ombre-boîte : aucune ; }
58 %{opacité :0 ; Ombre-boîte : aucune ; }
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 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 0 44px #a6a6a6,0 0 0 46px #000 ; }
90 %{opacité :0 ; Ombre-boîte : aucune ; }
100 %{opacité :0 ; Ombre-boîte : aucune ; }
}
.ani-étroit, .ani-zoom, .ani-rotationCrochet,
.ani-rotativeTube,.ani-ombre,.yeux .line :after{
mode animation de remplissage : en avant ;
-webkit-animation-mode remplissage : les deux ;
-o-animation-mode remplissage : les deux ;
}
</style>
</head>
<body>
<div class="container">
<!--œil gauche commence - >
<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>
<!-- extrémité de l’œil gauche - >
<!-- l’œil droit commence - >
<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>
<!-- extrémités de l’œil droit - >
</div>
</body>
[/</html>mw_shl_code]
|
Publié sur 14/11/2014 17:55:02
|
|
|
|
Propriétaire|
Publié sur 14/11/2014 17:57:04
|
Publié sur 14/11/2014 17:58:15
|
