纯css3制作写轮眼开眼及进化过程_html/css_WEB-ITnose
今天是火影忍者(漫画)宣告完结的日子,也是我首发的第一个随笔。看过火影的朋友都知道,写轮眼是什么,这里就不多说了。下面就直接展示整个效果,上张图,先睹为快:
目前已经测试 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 }

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
