首页 > 代码库 > 纯css3制作写轮眼开眼及进化过程[转]
纯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; 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
纯css3制作写轮眼开眼及进化过程[转]
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。