纯css3制作写轮眼开眼及进化过程_html/css_WEB-ITnose
程序员文章站
2022-05-05 09:02:57
...
今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快：
目前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器（两种模式）兼容已通过。
温馨提示：以上浏览器版本号均最新的；动画过程中每个阶段大约会停留5秒钟，希望你不会中幻术^_^。
在线演示 源码下载
HTML代码：
12 34 5 6 725 27 2882192010 11 12 131415 16 17 181922 232429 30 31 3250 513346344535 36 37 383940 41 42 434447 4849
CSS代码：
1 *{margin:0;padding:0;} 2 .container{ width:800px; 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 0.5s ease-in 7s;121 -webkit-animation:colour 0.5s ease-in 7s;122 -o-animation:colour 0.5s ease-in 7s;123 }124 @keyframes colour{125 0%{126 background:#000;127 }128 100%{129 background:#f00;130 }131 }132 @-webkit-keyframes colour{133 0%{134 background:#000;135 }136 100%{137 background:#f00;138 }139 }140 @-o-keyframes colour{141 0%{142 background:#000;143 }144 100%{145 background:#f00;146 }147 }148 .hook{149 width:92%;150 height:92%;151 position:absolute;152 right:0;153 left:0;154 top:5%;155 margin:0 auto;156 border-radius:60%;157 }158 .hook .bar{159 display:block;160 width:100%;161 height:100%;162 position:absolute;163 left:0;164 top:0;165 border-radius:60%;166 }167 .hook .bar b{168 display:block;169 width:8px;170 height:8px;171 background:#000;172 position:absolute;173 left:0;174 bottom:0;175 border-radius:60%;176 }177 .hook .bar b:after{178 content:"";179 width:8px;180 height:8px;181 border-color:transparent transparent #000 transparent;182 border-style:solid;183 border-width:0 0 5px 0;184 position:absolute;185 top:-1px;186 left:-3px;187 z-index:100;188 border-radius:0 0 0 70%;189 transform:rotate(-75deg);190 -webkit-transform:rotate(-75deg);191 -o-transform:rotate(-75deg);192 }193 .hook .bar:nth-child(1){194 transform:rotate(10deg);195 -webkit-transform:rotate(10deg);196 -o-transform:rotate(10deg);197 }198 .hook .bar:nth-child(2){199 transform:rotate(130deg);200 -webkit-transform:rotate(130deg);201 -o-transform:rotate(130deg);202 }203 .hook .bar:nth-child(3){204 transform:rotate(250deg);205 -webkit-transform:rotate(250deg);206 -o-transform:rotate(250deg);207 }208 .tube{209 width:93%;210 height:93%;211 position:absolute;212 right:0;213 left:0px;214 top:2px;215 margin:0 auto;216 background:#000;217 border-radius:60%;218 }219 .tube .bar{220 display:block;221 width:10px;222 height:20px;223 border-style:solid;224 border-width:0 0 0 10px;225 border-color:transparent transparent transparent black;226 position:absolute;227 border-radius:100% 0 0 0;228 }229 .tube .bar:nth-child(1){230 top:-10px;231 left:2px;232 transform:rotate(-10deg);233 }234 .tube .bar:nth-child(2){235 bottom:0px;236 right:-10px;237 transform:rotate(105deg);238 -webkit-transform:rotate(105deg);239 -o-transform:rotate(105deg);240 }241 .tube .bar:nth-child(3){242 bottom:-3px;243 left:-10px;244 transform:rotate(235deg);245 -webkit-transform:rotate(235deg);246 -o-transform:rotate(235deg);247 }248 .trans{249 width:130px;250 height:70px;251 position:absolute;252 overflow:hidden;253 top:0;254 left:0;255 border-radius:0 70px 0 50px;256 }257 .trans .bar{258 display:block;259 width:9px;260 height:9px;261 background:#000;262 position:absolute;263 top:50%;264 z-index:2;265 margin:-4px 0 0 -4px;266 border-radius:60%;267 }268 .trans .bar:after{ 269 content:"";270 display:block;271 width:11px;272 height:12px;273 position:absolute;274 top:-13px;275 left:-13px;276 z-index:100;277 border-radius:60%;278 background:rgba(250,250,250,.85);279 }280 .pullLeft .trans .bar{281 transform:skewX(-15deg);282 -webkit-transform:skewX(-15deg);283 -o-transform:skewX(-15deg);284 }285 .pullLeft .trans .bar{left:48%;}286 .pullRight .trans .bar{287 transform:skewX(-15deg) scale(-1,1);288 -webkit-transform:skewX(-15deg) scale(-1,1);289 -o-transform:skewX(-15deg) scale(-1,1);290 }291 .pullRight .trans .bar{right:48%;}292 .ani-narrow{293 animation:ani-narrow 0.5s linear 1s;294 -webkit-animation:ani-narrow 0.5s linear 1s;295 -o-animation:ani-narrow 0.5s linear 1s;296 }297 @keyframes ani-narrow{298 from{299 transform:scale(1);300 }301 to{302 opacity:0;303 transform:scale(0);304 }305 }306 @-webkit-keyframes ani-narrow{307 from{308 -webkit-transform:scale(1);309 }310 to{311 opacity:0;312 -webkit-transform:scale(0);313 }314 }315 @-o-keyframes ani-narrow{316 from{317 -o-transform:scale(1);318 }319 to{320 opacity:0;321 -o-transform:scale(0);322 }323 }324 .ani-zoom{325 animation:ani-zoom 11s linear 0.8s;326 -webkit-animation:ani-zoom 11s linear 0.8s;327 -o-animation:ani-zoom 11s linear 0.8s;328 }329 @keyframes ani-zoom{330 0%{331 opacity:0;332 transform:scale(0);333 }334 6%{335 opacity:1;336 transform:scale(1);337 }338 95%{339 opacity:1;340 transform:scale(1);341 }342 100%{343 opacity:0;344 transform:scale(1.5);345 }346 }347 @-webkit-keyframes ani-zoom{348 0%{349 opacity:0;350 -webkit-transform:scale(0);351 }352 6%{353 opacity:1;354 -webkit-transform:scale(1);355 }356 95%{357 opacity:1;358 -webkit-transform:scale(1);359 }360 100%{361 opacity:0;362 -webkit-transform:scale(1.5);363 }364 }365 @-o-keyframes ani-zoom{366 0%{367 opacity:0;368 -o-transform:scale(0);369 }370 6%{371 opacity:1;372 -o-transform:scale(1);373 }374 95%{375 opacity:1;376 -o-transform:scale(1);377 }378 100%{379 opacity:0;380 -o-transform:scale(1.5);381 }382 }383 .ani-rotateHook{384 animation:ani-rotateHook 5s ease-in 2.5s;385 -webkit-animation:ani-rotateHook 5s ease-in 2.5s;386 -o-animation:ani-rotateHook 5s ease-in 2.5s;387 }388 @keyframes ani-rotateHook{389 0%{390 opacity:0;391 transform:scale(0) rotate(0);392 }393 15%{394 opacity:1;395 transform:scale(1) rotate(-360deg);396 }397 90%{398 opacity:1;399 transform:scale(1) rotate(-360deg);400 }401 100%{402 opacity:0;403 transform:scale(1.8) rotate(-540deg);404 }405 }406 @-webkit-keyframes ani-rotateHook{407 0%{408 opacity:0;409 -webkit-transform:scale(0) rotate(0);410 }411 15%{412 opacity:1;413 -webkit-transform:scale(1) rotate(-360deg);414 }415 90%{416 opacity:1;417 -webkit-transform:scale(1) rotate(-360deg);418 }419 100%{420 opacity:0;421 -webkit-transform:scale(1.8) rotate(-540deg);422 }423 }424 @-o-keyframes ani-rotateHook{425 0%{426 opacity:0;427 -o-transform:scale(0) rotate(0);428 }429 15%{430 opacity:1;431 -o-transform:scale(1) rotate(-360deg);432 }433 90%{434 opacity:1;435 -o-transform:scale(1) rotate(-360deg);436 }437 100%{438 opacity:0;439 -o-transform:scale(1.8) rotate(-540deg);440 }441 }442 .ani-rotateTube{443 animation:ani-rotateTube 5s ease-in-out 6.5s;444 -webkit-animation:ani-rotateTube 5s ease-in-out 6.5s;445 -o-animation:ani-rotateTube 5s ease-in-out 6.5s;446 }447 @keyframes ani-rotateTube{448 0%{449 opacity:0;450 transform:scale(0) rotate(0);451 }452 30%{453 opacity:1;454 transform:scale(1) rotate(-360deg);455 }456 100%{457 opacity:1;458 transform:scale(1) rotate(-360deg);459 }460 }461 @-webkit-keyframes ani-rotateTube{462 0%{463 opacity:0;464 -webkit-transform:scale(0) rotate(0);465 }466 30%{467 opacity:1;468 -webkit-transform:scale(1) rotate(-360deg);469 }470 100%{471 opacity:1;472 -webkit-transform:scale(1) rotate(-360deg);473 }474 }475 @-o-keyframes ani-rotateTube{476 0%{477 opacity:0;478 -o-transform:scale(0) rotate(0);479 }480 30%{481 opacity:1;482 -o-transform:scale(1) rotate(-360deg);483 }484 100%{485 opacity:1;486 -o-transform:scale(1) rotate(-360deg);487 }488 }489 .ani-shadow{490 animation:ani-shadow 1s linear 11s;491 -webkit-animation:ani-shadow 1s linear 11s;492 -o-animation:ani-shadow 1s linear 11s;493 }494 @keyframes ani-shadow{495 0%{496 opacity:0;497 box-shadow:none;498 }499 100%{500 opacity:1;501 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;502 }503 }504 @-webkit-keyframes ani-shadow{505 0%{506 opacity:0;507 box-shadow:none;508 }509 100%{510 opacity:1;511 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;512 }513 }514 @-o-keyframes ani-shadow{515 0%{516 opacity:0;517 box-shadow:none;518 }519 100%{520 opacity:1;521 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;522 }523 }524 .ani-narrow,525 .ani-zoom,526 .ani-rotateHook,527 .ani-rotateTube,528 .ani-shadow,529 .eyes .line:after{530 animation-fill-mode:both;531 -webkit-animation-fill-mode:both;532 -o-animation-fill-mode:both;533 }