纯css3制作写轮眼开眼及进化过程

今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快：

目前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器（两种模式）兼容已通过。

温馨提示：以上浏览器版本号均最新的；动画过程中每个阶段大约会停留5秒钟，希望你不会中幻术^_^。

在线演示　　　　源码下载

根据某位网友的建议，我做了点小修改：重新计算了一下时间，让效果可循环，整个循环一圈需要20秒的时间，每个阶段还是和原来一样大约停留5秒钟。

HTML代码：

 1 <div class="container"> 2     <!--左眼开始--> 3     <div class="eyesBoxs pullLeft"> 4         <div class="PRofile skewLeft"></div> 5         <div class="shadow skewLeft"></div> 6         <div class="basic ani-narrow"></div> 7         <div class="eyes ani-zoom"> 8             <div class="line">            9                 <div class="hook ani-rotateHook">10                     <span class="bar"><b></b></span>11                     <span class="bar"><b></b></span>12                     <span class="bar"><b></b></span>13                 </div>14                 <div class="tube ani-rotateTube">15                     <span class="bar"></span>16                     <span class="bar"></span>17                     <span class="bar"></span>18                 </div>19             </div>20         </div>21         <div class="trans skewLeft">22             <span class="bar ani-shadow"></span>23         </div>24     </div>25     <!--左眼结束-->27     <!--右眼开始-->28     <div class="eyesBoxs pullRight">29         <div class="profile skewRight"></div>30         <div class="shadow skewRight"></div>31         <div class="basic ani-narrow"></div>32         <div class="eyes ani-zoom">33             <div class="line">           34                 <div class="hook ani-rotateHook">35                     <span class="bar"><b></b></span>36                     <span class="bar"><b></b></span>37                     <span class="bar"><b></b></span>38                 </div>39                 <div class="tube ani-rotateTube">40                     <span class="bar"></span>41                     <span class="bar"></span>42                     <span class="bar"></span>43                 </div>44             </div>45         </div>46         <div class="trans skewRight">47             <span class="bar ani-shadow"></span>48         </div>49     </div>50     <!--右眼结束-->51 </div>

CSS代码：

  1 *{margin:0;padding:0;}  2 .container{ width:750px; height:200px; margin:30px auto;overflow:hidden; background:#000; position:relative;}  3 .eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}  4 .pullLeft{left:100px;}  5 .pullRight{right:100px;}  6 .profile{  7     width:130px;  8     height:70px;  9     background:#fff; 10     position:absolute; 11     top:0; 12     left:0; 13     overflow:hidden; 14     border-radius:0 70px 0 50px; 15 } 16 .shadow{ 17     display:block; 18     width:130px; 19     height:70px; 20     position:absolute; 21     top:0; 22     z-index:5; 23     border-radius:0 90px 0 60px; 24     box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset; 25 } 26 .skewLeft{ 27     transform:skewX(15deg); 28     -webkit-transform:skewX(15deg); 29     -o-transform:skewX(15deg); 30 } 31 .skewRight{ 32     transform:skewX(-15deg) scale(-1,1); 33     -webkit-transform:skewX(-15deg) scale(-1,1); 34     -o-transform:skewX(-15deg) scale(-1,1); 35 } 36 .basic{ 37     width:60px; 38     height:60px; 39     background:#000; 40     position:absolute; 41     top:50%; 42     left:50%; 43     z-index:10; 44     margin-top:-30px; 45     border-radius:60%; 46 } 47 .basic:before{ 48     content:""; 49     display:block; 50     width:10px; 51     height:11px; 52     position:absolute; 53     left:15px; 54     top:15px; 55     z-index:100; 56     border-radius:60%; 57     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)); 58     -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)); 59     -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)); 60 } 61 .pullLeft .basic{ 62     margin-left:-33px; 63 } 64 .pullRight .basic{ 65     margin-left:-27px; 66 } 67 .eyes{ 68     width:55px; 69     height:55px; 70     background:#ff0000; 71     position:absolute; 72     top:8px; 73     border-radius:60%; 74     box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000; 75 } 76 .pullLeft .eyes{left:35px;} 77 .pullRight .eyes{right:35px;} 78 .eyes .line{ 79     width:64%; 80     height:64%; 81     background:#ff0000; 82     position:absolute; 83     right:0; 84     left:0; 85     top:10px; 86     margin:0 auto; 87     border-radius:60%; 88     box-shadow:0 0 2px 0 #b20000 inset; 89 } 90 .eyes .line:before{ 91     content:""; 92     display:block; 93     width:10px; 94     height:11px; 95     position:absolute; 96     left:3px; 97     top:4px; 98     z-index:100; 99     border-radius:60%;100     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));101     -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));102     -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));103 }104 .eyes .line:after{105     content:"";106     display:block;107     width:10px;108     height:10px;109     position:absolute;110     background:#000;111     right:0;112     left:-1px;113     top:13px;114     z-index:100;115     margin:0 auto;116     border-radius:60%;117     transform:rotate(150deg);118     -webkit-transform:rotate(150deg);119     -o-transform:rotate(150deg);120     animation:colour 20s ease-in infinite;121     -webkit-animation:colour 20s ease-in infinite;122     -o-animation:colour 20s ease-in infinite;123 }124 @keyframes colour{125     0%{background:#000;}126     35%{background:#000;}127     40%{background:#f00;}128     100%{background:#f00;}129 }130 @-webkit-keyframes colour{131     0%{background:#000;}132     35%{background:#000;}133     40%{background:#f00;}134     100%{background:#f00;}135 }136 @-o-keyframes colour{137     0%{background:#000;}138     35%{background:#000;}139     40%{background:#f00;}140     100%{background:#f00;}141 }142 /*******三勾玉 开始*******/143 .hook{144     width:92%;145     height:92%;146     position:absolute;147     right:0;148     left:0;149     top:5%;150     margin:0 auto;151     border-radius:60%;152 }153 .hook .bar{154     display:block;155     width:100%;156     height:100%;157     position:absolute;158     left:0;159     top:0;160     border-radius:60%;161 }162 .hook .bar b{163     display:block;164     width:8px;165     height:8px;166     background:#000;167     position:absolute;168     left:0;169     bottom:0;170     border-radius:60%;171 }172 .hook .bar b:after{173     content:"";174     width:8px;175     height:8px;176     border-color:transparent transparent #000 transparent;177     border-style:solid;178     border-width:0 0 5px 0;179     position:absolute;180     top:-1px;181     left:-3px;182     z-index:1