纯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>

*{margin:0;padding:0;}.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;    top:0;    left:0;    overflow:hidden;    border-radius:0 70px 0 50px;}.shadow{    display:block;    width:130px;    height:70px;    position:absolute;    top:0;    z-index:5;    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%;    z-index:10;    margin-top:-30px;    border-radius:60%;}.basic:before{    content:"";    display:block;    width:10px;    height:11px;    position:absolute;    left:15px;    top:15px;    z-index:100;    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;    right:0;    left:0;    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;    z-index:100;    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;    right:0;    left:-1px;    top:13px;    z-index:100;    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;    right:0;    left:0;    top:5%;    margin:0 auto;    border-radius:60%;}.hook .bar{    display:block;    width:100%;    height:100%;    position:absolute;    left:0;    top:0;    border-radius:60%;}.hook .bar b{    display:block;    width:8px;    height:8px;    background:#000;    position:absolute;    left:0;    bottom:0;    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;    z-index:100;    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;    right:0;    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;