目前已经测试 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
So fügen Sie ein Video in HTML ein
So lösen Sie das Problem, dass in Win7 kein neuer Ordner erstellt werden kann
So beheben Sie einen Skriptfehler
So zeigen Sie zwei Divs nebeneinander an
So verwenden Sie RealVNC
Was sind die Vor- und Nachteile der Dezentralisierung?
Bitcoin-Handelsplattform
0x00000006 Was tun, wenn der Drucker nicht angeschlossen werden kann?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
