纯css3制作写轮眼开眼及进化过程[转]_html/css_WEB-ITnose

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

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

在线演示　　　　源码下载

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

HTML代码：

 1 
 2      3     
 4          5          6          7         
 8             
            9                 
10                     11                     12                     13                 
14                 
15                     16                     17                     18                 
19             
20         
21         
22             23         
24     
25     27     28     
29         30         31         32         
33             
           34                 
35                     36                     37                     38                 
39                 
40                     41                     42                     43                 
44             
45         
46         
47             48         
49     
50     51 

*{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;    transform:rotate(235deg);    -webkit-transform:rotate(235deg);    -o-transform:rotate(235deg);}/*******万花筒 结束*******//*******轮回眼 开始*******/.trans{    width:130px;    height:70px;    position:absolute;    overflow:hidden;    top:0;    left:0;    border-radius:0 70px 0 50px;}.trans .bar{    display:block;    width:9px;    height:9px;    background:#000;    position:absolute;    top:50%;    z-index:2;    margin:-4px 0 0 -4px;    border-radius:60%;}.trans .bar:after{        content:"";    display:block;    width:11px;    height:12px;    position:absolute;    top:-13px;    left:-13px;    z-index:100;    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{    0%{opacity:1;transform:scale(1);}    5%{opacity:1;transform:scale(1);}    10%{opacity:0;transform:scale(0);}    87%{opacity:0;transform:scale(0);}    90%{opacity:1;transform:scale(1);}    100%{opacity:1;transform:scale(1);}}@-webkit-keyframes ani-narrow{    0%{opacity:1;-webkit-transform:scale(1);}    5%{opacity:1;-webkit-transform:scale(1);}    10%{opacity:0;-webkit-transform:scale(0);}    87%{opacity:0;-webkit-transform:scale(0);}    90%{opacity:1;-webkit-transform:scale(1);}    100%{opacity:1;-webkit-transform:scale(1);}}@-o-keyframes ani-narrow{    0%{opacity:1;-o-transform:scale(1);}    5%{opacity:1;-o-transform:scale(1);}    10%{opacity:0;-o-transform:scale(0);}    87%{opacity:0;-o-transform:scale(0);}    90%{opacity:1;-o-transform:scale(1);}    100%{opacity: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{    0%{opacity:0;transform:scale(0);}    5%{opacity:0;transform:scale(0);}    8%{opacity:1;transform:scale(1);}    60%{opacity:1;transform:scale(1);}    62%{opacity:0;transform:scale(1.5);}    100%{opacity:0;transform:scale(0);}}@-webkit-keyframes ani-zoom{    0%{opacity:0;-webkit-transform:scale(0);}    5%{opacity:0;-webkit-transform:scale(0);}    8%{opacity:1;-webkit-transform:scale(1);}    60%{opacity:1;-webkit-transform:scale(1);}    62%{opacity:0;-webkit-transform:scale(1.5);}    100%{opacity:0;-webkit-transform:scale(0);}}@-o-keyframes ani-zoom{    0%{opacity:0;-o-transform:scale(0);}    5%{opacity:0;-o-transform:scale(0);}    8%{opacity:1;-o-transform:scale(1);}    60%{opacity:1;-o-transform:scale(1);}    62%{opacity:0;-o-transform:scale(1.5);}    100%{opacity:0;-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{    0%{opacity:0;transform:scale(0) rotate(0);}    9%{opacity:0;transform:scale(0) rotate(0);}    13%{opacity:1;transform:scale(1) rotate(-360deg);}    35%{opacity:1;transform:scale(1) rotate(-360deg);}    38%{opacity:0;transform:scale(1.8) rotate(-540deg);}    100%{opacity:0;transform:scale(0) rotate(0);}}@-webkit-keyframes ani-rotateHook{    0%{opacity:0;-webkit-transform:scale(0) rotate(0);}    9%{opacity:0;-webkit-transform:scale(0) rotate(0);}    13%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}    35%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}    38%{opacity:0;-webkit-transform:scale(1.8) rotate(-540deg);}    100%{opacity:0;-webkit-transform:scale(0) rotate(0);}}@-o-keyframes ani-rotateHook{    0%{opacity:0;-o-transform:scale(0) rotate(0);}    9%{opacity:0;-o-transform:scale(0) rotate(0);}    13%{opacity:1;-o-transform:scale(1) rotate(-360deg);}    35%{opacity:1;-o-transform:scale(1) rotate(-360deg);}    38%{opacity:0;-o-transform:scale(1.8) rotate(-540deg);}    100%{opacity:0;-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{    0%{opacity:0;transform:scale(0) rotate(0);}    35%{opacity:0;transform:scale(0) rotate(0);}    40%{opacity:1;transform:scale(1) rotate(-360deg);}    60%{opacity:1;transform:scale(1) rotate(-360deg);}    100%{opacity:1;transform:scale(1) rotate(-360deg);}}@-webkit-keyframes ani-rotateTube{    0%{opacity:0;-webkit-transform:scale(0) rotate(0);}    35%{opacity:0;-webkit-transform:scale(0) rotate(0);}    40%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}    60%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}    100%{opacity:1;-webkit-transform:scale(1) rotate(-360deg);}}@-o-keyframes ani-rotateTube{    0%{opacity:0;-o-transform:scale(0) rotate(0);}    35%{opacity:0;-o-transform:scale(0) rotate(0);}    40%{opacity:1;-o-transform:scale(1) rotate(-360deg);}    60%{opacity:1;-o-transform:scale(1) rotate(-360deg);}    100%{opacity:1;-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{    0%{opacity:0;box-shadow:none;}    58%{opacity:0;box-shadow:none;}    64%{opacity: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 44px #a6a6a6,0 0 0 46px #000;}    87%{opacity: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 44px #a6a6a6,0 0 0 46px #000;}    90%{opacity:0;box-shadow:none;}    100%{opacity:0;box-shadow:none;}}@-webkit-keyframes ani-shadow{    0%{opacity:0;box-shadow:none;}    58%{opacity:0;box-shadow:none;}    64%{opacity: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 44px #a6a6a6,0 0 0 46px #000;}    87%{opacity: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 44px #a6a6a6,0 0 0 46px #000;}    90%{opacity:0;box-shadow:none;}    100%{opacity:0;box-shadow:none;}}@-o-keyframes ani-shadow{    0%{opacity:0;box-shadow:none;}    58%{opacity:0;box-shadow:none;}    64%{opacity: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 44px #a6a6a6,0 0 0 46px #000;}    87%{opacity: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 44px #a6a6a6,0 0 0 46px #000;}    90%{opacity:0;box-shadow:none;}    100%{opacity:0;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;}

转载源地址：http://www.cnblogs.com/flylee90/archive/2014/11/10/4086102.html