


Pure css3 production of sharingan eye opening and evolution process_html/css_WEB-ITnose
Today is the day when Naruto (manga) is announced to have come to an end, and it is also the first article I will publish. Friends who have watched Naruto know what the Sharingan is, so I won’t go into details here. The entire effect is directly shown below. The above picture is a sneak peek:
Currently, IE10, Firefox browser, Chrome browser, Opera browser, and 360 browser (two modes) have been tested. Compatibility passed.
Warm reminder: The above browser version numbers are all the latest; each stage of the animation process will stay for about 5 seconds, I hope you will not fall into the illusion ^_^.
Online demo source code download
HTML code:
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 code:
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 }

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
