今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快：
目前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器（两种模式）兼容已通过。
温馨提示：以上浏览器版本号均最新的；动画过程中每个阶段大约会停留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>
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 }
原文：http://www.cnblogs.com/lonelyxmas/p/4088544.html
