今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快：
目前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器（两种模式）兼容已通过。
温馨提示：以上浏览器版本号均最新的；动画过程中每个阶段大约会停留5秒钟，希望你不会中幻术^_^。
HTML代码：
<div class="container">
<!--左眼开始-->
<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>
<!--左眼结束-->
<!--右眼开始-->
<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>
<!--右眼结束-->
</div>CSS代码：
;;}
.container{ width:750px; height:200px; margin:30px auto;overflow:hidden; background:#000; position:relative;}
.eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}
.pullLeft{left:100px;}
.pullRight{right:100px;}
.profile{
width:130px;
height:70px;
background:#fff;
position:absolute;
;
;
overflow:hidden;
border-radius:0 70px 0 50px;
}
.shadow{
display:block;
width:130px;
height:70px;
position:absolute;
;
;
border-radius:0 90px 0 60px;
box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset;
}
.skewLeft{
transform:skewX(15deg);
-webkit-transform:skewX(15deg);
-o-transform:skewX(15deg);
}
.skewRight{
transform:skewX(-15deg) scale(-1,1);
-webkit-transform:skewX(-15deg) scale(-1,1);
-o-transform:skewX(-15deg) scale(-1,1);
}
.basic{
width:60px;
height:60px;
background:#000;
position:absolute;
top:50%;
left:50%;
;
margin-top:-30px;
border-radius:60%;
}
.basic:before{
content:"";
display:block;
width:10px;
height:11px;
position:absolute;
left:15px;
top:15px;
;
border-radius:60%;
background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
-webkit-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.9),rgba(225,225,225,0.3));
-o-background-image: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{
margin-left:-33px;
}
.pullRight .basic{
margin-left:-27px;
}
.eyes{
width:55px;
height:55px;
background:#ff0000;
position:absolute;
top:8px;
border-radius:60%;
box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px;}
.pullRight .eyes{right:35px;}
.eyes .line{
width:64%;
height:64%;
background:#ff0000;
position:absolute;
;
;
top:10px;
margin:0 auto;
border-radius:60%;
box-shadow:0 0 2px 0 #b20000 inset;
}
.eyes .line:before{
content:"";
display:block;
width:10px;
height:11px;
position:absolute;
left:3px;
top:4px;
;
border-radius:60%;
background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
-webkit-background-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-background-image:radial-gradient(circle,rgb(225,225,225),rgb(225,225,225),rgba(225,225,225,0.7),rgba(225,225,225,0.3));
}
.eyes .line:after{
content:"";
display:block;
width:10px;
height:10px;
position:absolute;
background:#000;
;
left:-1px;
top:13px;
;
margin:0 auto;
border-radius:60%;
transform:rotate(150deg);
-webkit-transform:rotate(150deg);
-o-transform:rotate(150deg);
animation:colour 20s ease-in infinite;
-webkit-animation:colour 20s ease-in infinite;
-o-animation:colour 20s ease-in infinite;
}
@keyframes colour{
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{
width:92%;
height:92%;
position:absolute;
;
;
top:5%;
margin:0 auto;
border-radius:60%;
}
.hook .bar{
display:block;
width:100%;
height:100%;
position:absolute;
;
;
border-radius:60%;
}
.hook .bar b{
display:block;
width:8px;
height:8px;
background:#000;
position:absolute;
;
;
border-radius:60%;
}
.hook .bar b:after{
content:"";
width:8px;
height:8px;
border-color:transparent transparent #000 transparent;
border-style:solid;
border-width:0 0 5px 0;
position:absolute;
top:-1px;
left:-3px;
;
border-radius:0 0 0 70%;
transform:rotate(-75deg);
-webkit-transform:rotate(-75deg);
-o-transform:rotate(-75deg);
}
.hook .bar:nth-child(1){
transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
}
.hook .bar:nth-child(2){
transform:rotate(130deg);
-webkit-transform:rotate(130deg);
-o-transform:rotate(130deg);
}
.hook .bar:nth-child(3){
transform:rotate(250deg);
-webkit-transform:rotate(250deg);
-o-transform:rotate(250deg);
}
/*******三勾玉 结束*******/
/*******万花筒 开始*******/
.tube{
width:93%;
height:93%;
position:absolute;
;
left:0px;
top:2px;
margin:0 auto;
background:#000;
border-radius:60%;
}
.tube .bar{
display:block;
width:10px;
height:20px;
border-style:solid;
border-width:0 0 0 10px;
border-color:transparent transparent transparent black;
position:absolute;
border-radius:100% 0 0 0;
}
.tube .bar:nth-child(1){
top:-10px;
left:2px;
transform:rotate(-10deg);
}
.tube .bar:nth-child(2){
bottom:0px;
right:-10px;
transform:rotate(105deg);
-webkit-transform:rotate(105deg);
-o-transform:rotate(105deg);
}
.tube .bar:nth-child(3){
bottom:-3px;
left:-10px;
transform:rotate(235deg);
-webkit-transform:rotate(235deg);
-o-transform:rotate(235deg);
}
/*******万花筒 结束*******/
/*******轮回眼 开始*******/
.trans{
width:130px;
height:70px;
position:absolute;
overflow:hidden;
;
;
border-radius:0 70px 0 50px;
}
.trans .bar{
display:block;
width:9px;
height:9px;
background:#000;
position:absolute;
top:50%;
;
margin:-4px 0 0 -4px;
border-radius:60%;
}
.trans .bar:after{
content:"";
display:block;
width:11px;
height:12px;
position:absolute;
top:-13px;
left:-13px;
;
border-radius:60%;
background:rgba(250,250,250,.85);
}
.pullLeft .trans .bar{
transform:skewX(-15deg);
-webkit-transform:skewX(-15deg);
-o-transform:skewX(-15deg);
}
.pullLeft .trans .bar{left:48%;}
.pullRight .trans .bar{
transform:skewX(-15deg) scale(-1,1);
-webkit-transform:skewX(-15deg) scale(-1,1);
-o-transform:skewX(-15deg) scale(-1,1);
}
.pullRight .trans .bar{right:48%;}
/*******轮回眼 结束*******/
.ani-narrow{
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{
;transform:scale(1);}
;transform:scale(1);}
;transform:scale(0);}
;transform:scale(0);}
;transform:scale(1);}
;transform:scale(1);}
}
@-webkit-keyframes ani-narrow{
;-webkit-transform:scale(1);}
;-webkit-transform:scale(1);}
;-webkit-transform:scale(0);}
;-webkit-transform:scale(0);}
;-webkit-transform:scale(1);}
;-webkit-transform:scale(1);}
}
@-o-keyframes ani-narrow{
;-o-transform:scale(1);}
;-o-transform:scale(1);}
;-o-transform:scale(0);}
;-o-transform:scale(0);}
;-o-transform:scale(1);}
;-o-transform:scale(1);}
}
.ani-zoom{
animation:ani-zoom 20s linear infinite;
-webkit-animation:ani-zoom 20s linear infinite;
-o-animation:ani-zoom 20s linear infinite;
}
@keyframes ani-zoom{
;transform:scale(0);}
;transform:scale(0);}
;transform:scale(1);}
;transform:scale(1);}
;transform:scale(1.5);}
;transform:scale(0);}
}
@-webkit-keyframes ani-zoom{
;-webkit-transform:scale(0);}
;-webkit-transform:scale(0);}
;-webkit-transform:scale(1);}
;-webkit-transform:scale(1);}
;-webkit-transform:scale(1.5);}
;-webkit-transform:scale(0);}
}
@-o-keyframes ani-zoom{
;-o-transform:scale(0);}
;-o-transform:scale(0);}
;-o-transform:scale(1);}
;-o-transform:scale(1);}
;-o-transform:scale(1.5);}
;-o-transform:scale(0);}
}
.ani-rotateHook{
animation:ani-rotateHook 20s ease-in infinite;
-webkit-animation:ani-rotateHook 20s ease-in infinite;
-o-animation:ani-rotateHook 20s ease-in infinite;
}
@keyframes ani-rotateHook{
;transform:scale(0) rotate(0);}
;transform:scale(0) rotate(0);}
;transform:scale(1) rotate(-360deg);}
;transform:scale(1) rotate(-360deg);}
;transform:scale(1.8) rotate(-540deg);}
;transform:scale(0) rotate(0);}
}
@-webkit-keyframes ani-rotateHook{
;-webkit-transform:scale(0) rotate(0);}
;-webkit-transform:scale(0) rotate(0);}
;-webkit-transform:scale(1) rotate(-360deg);}
;-webkit-transform:scale(1) rotate(-360deg);}
;-webkit-transform:scale(1.8) rotate(-540deg);}
;-webkit-transform:scale(0) rotate(0);}
}
@-o-keyframes ani-rotateHook{
;-o-transform:scale(0) rotate(0);}
;-o-transform:scale(0) rotate(0);}
;-o-transform:scale(1) rotate(-360deg);}
;-o-transform:scale(1) rotate(-360deg);}
;-o-transform:scale(1.8) rotate(-540deg);}
;-o-transform:scale(0) rotate(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{
;transform:scale(0) rotate(0);}
;transform:scale(0) rotate(0);}
;transform:scale(1) rotate(-360deg);}
;transform:scale(1) rotate(-360deg);}
;transform:scale(1) rotate(-360deg);}
}
@-webkit-keyframes ani-rotateTube{
;-webkit-transform:scale(0) rotate(0);}
;-webkit-transform:scale(0) rotate(0);}
;-webkit-transform:scale(1) rotate(-360deg);}
;-webkit-transform:scale(1) rotate(-360deg);}
;-webkit-transform:scale(1) rotate(-360deg);}
}
@-o-keyframes ani-rotateTube{
;-o-transform:scale(0) rotate(0);}
;-o-transform:scale(0) rotate(0);}
;-o-transform:scale(1) rotate(-360deg);}
;-o-transform:scale(1) rotate(-360deg);}
;-o-transform:scale(1) rotate(-360deg);}
}
.ani-shadow{
animation:ani-shadow 20s linear infinite;
-webkit-animation:ani-shadow 20s linear infinite;
-o-animation:ani-shadow 20s linear infinite;
}
@keyframes ani-shadow{
;box-shadow:none;}
;box-shadow:none;}
;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;}
;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;}
;box-shadow:none;}
;box-shadow:none;}
}
@-webkit-keyframes ani-shadow{
;box-shadow:none;}
;box-shadow:none;}
;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;}
;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;}
;box-shadow:none;}
;box-shadow:none;}
}
@-o-keyframes ani-shadow{
;box-shadow:none;}
;box-shadow:none;}
;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;}
;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;}
;box-shadow:none;}
;box-shadow:none;}
}
.ani-narrow,.ani-zoom,.ani-rotateHook,
.ani-rotateTube,.ani-shadow,.eyes .line:after{
animation-fill-mode:forwards;
-webkit-animation-fill-mode:both;
-o-animation-fill-mode:both;
}