站内搜索

纯css3制作写轮眼开眼及进化过程

今天是火影忍者(漫画)宣告完结的日子,也是我首发的第一个随笔。看过火影的朋友都知道,写轮眼是什么,这里就不多说了。下面就直接展示整个效果,上张图,先睹为快:

目前已经测试 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:750px; 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 20s ease-in infinite;121     -webkit-animation:colour 20s ease-in infinite;122     -o-animation:colour 20s ease-in infinite;123 }124 @keyframes colour{125     0%{background:#000;}126     35%{background:#000;}127     40%{background:#f00;}128     100%{background:#f00;}129 }130 @-webkit-keyframes colour{131     0%{background:#000;}132     35%{background:#000;}133     40%{background:#f00;}134     100%{background:#f00;}135 }136 @-o-keyframes colour{137     0%{background:#000;}138     35%{background:#000;}139     40%{background:#f00;}140     100%{background:#f00;}141 }142 /*******三勾玉 开始*******/143 .hook{144     width:92%;145     height:92%;146     position:absolute;147     right:0;148     left:0;149     top:5%;150     margin:0 auto;151     border-radius:60%;152 }153 .hook .bar{154     display:block;155     width:100%;156     height:100%;157     position:absolute;158     left:0;159     top:0;160     border-radius:60%;161 }162 .hook .bar b{163     display:block;164     width:8px;165     height:8px;166     background:#000;167     position:absolute;168     left:0;169     bottom:0;170     border-radius:60%;171 }172 .hook .bar b:after{173     content:"";174     width:8px;175     height:8px;176     border-color:transparent transparent #000 transparent;177     border-style:solid;178     border-width:0 0 5px 0;179     position:absolute;180     top:-1px;181     left:-3px;182     z-index:100;183     border-radius:0 0 0 70%;184     transform:rotate(-75deg);185     -webkit-transform:rotate(-75deg);186     -o-transform:rotate(-75deg);187 }188 .hook .bar:nth-child(1){189     transform:rotate(10deg);190     -webkit-transform:rotate(10deg);191     -o-transform:rotate(10deg);192 }193 .hook .bar:nth-child(2){194     transform:rotate(130deg);195     -webkit-transform:rotate(130deg);196     -o-transform:rotate(130deg);197 }198 .hook .bar:nth-child(3){199     transform:rotate(250deg);200     -webkit-transform:rotate(250deg);201     -o-transform:rotate(250deg);202 }203 /*******三勾玉 结束*******/204 /*******万花筒 开始*******/205 .tube{206     width:93%;207     height:93%;208     position:absolute;209     right:0;210     left:0px;211     top:2px;212     margin:0 auto;213     background:#000;214     border-radius:60%;215 }216 .tube .bar{217     display:block;218     width:10px;219     height:20px;220     border-style:solid;221     border-width:0 0 0 10px;222     border-color:transparent transparent transparent black;223     position:absolute;224     border-radius:100% 0 0 0;225 }226 .tube .bar:nth-child(1){227     top:-10px;228     left:2px;229     transform:rotate(-10deg);230 }231 .tube .bar:nth-child(2){232     bottom:0px;233     right:-10px;234     transform:rotate(105deg);235     -webkit-transform:rotate(105deg);236     -o-transform:rotate(105deg);237 }238 .tube .bar:nth-child(3){239     bottom:-3px;240     left:-10px;241     transform:rotate(235deg);242     -webkit-transform:rotate(235deg);243     -o-transform:rotate(235deg);244 }245 /*******万花筒 结束*******/246 /*******轮回眼 开始*******/247 .trans{248     width:130px;249     height:70px;250     position:absolute;251     overflow:hidden;252     top:0;253     left:0;254     border-radius:0 70px 0 50px;255 }256 .trans .bar{257     display:block;258     width:9px;259     height:9px;260     background:#000;261     position:absolute;262     top:50%;263     z-index:2;264     margin:-4px 0 0 -4px;265     border-radius:60%;266 }267 .trans .bar:after{    268     content:"";269     display:block;270     width:11px;271     height:12px;272     position:absolute;273     top:-13px;274     left:-13px;275     z-index:100;276     border-radius:60%;277     background:rgba(250,250,250,.85);278 }279 .pullLeft .trans .bar{280     transform:skewX(-15deg);281     -webkit-transform:skewX(-15deg);282     -o-transform:skewX(-15deg);283 }284 .pullLeft .trans .bar{left:48%;}285 .pullRight .trans .bar{286     transform:skewX(-15deg) scale(-1,1);287     -webkit-transform:skewX(-15deg) scale(-1,1);288     -o-transform:skewX(-15deg) scale(-1,1);289 }290 .pullRight .trans .bar{right:48%;}291 /*******轮回眼 结束*******/292 .ani-narrow{293     animation:ani-narrow 20s ease-out infinite;294     -webkit-animation:ani-narrow 20s ease-out infinite;295     -o-animation:ani-narrow 20s ease-out infinite;296 }297 @keyframes ani-narrow{298     0%{opacity:1;transform:scale(1);}299     5%{opacity:1;transform:scale(1);}300     10%{opacity:0;transform:scale(0);}301     87%{opacity:0;transform:scale(0);}302     90%{opacity:1;transform:scale(1);}303     100%{opacity:1;transform:scale(1);}304 }305 @-webkit-keyframes ani-narrow{306     0%{opacity:1;-webkit-transform:scale(1);}307     5%{opacity:1;-webkit-transform:scale(1);}308     10%{opacity:0;-webkit-transform:scale(0);}309     87%{opacity:0;-webkit-transform:scale(0);}310     90%{opacity:1;-webkit-transform:scale(1);}311     100%{opacity:1;-webkit-transform:scale(1);}312 }313 @-o-keyframes ani-narrow{314     0%{opacity:1;-o-transform:scale(1);}315     5%{opacity:1;-o-transform:scale(1);}316     10%{opacity:0;-o-transform:scale(0);}317     87%{opacity:0;-o-transform:scale(0);}318     90%{opacity:1;-o-transform:scale(1);}319     100%{opacity:1;-o-transform:scale(1);}320 }321 .ani-zoom{322     animation:ani-zoom 20s linear infinite;323     -webkit-animation:ani-zoom 20s linear infinite;324     -o-animation:ani-zoom 20s linear infinite;325 }326 @keyframes ani-zoom{327     0%{opacity:0;transform:scale(0);}328     5%{opacity:0;transform:scale(0);}329     8%{opacity:1;transform:scale(1);}330     60%{opacity:1;transform:scale(1);}331     62%{opacity:0;transform:scale(1.5);}332     100%{opacity:0;transform:scale(0);}333 }334 @-webkit-keyframes ani-zoom{335     0%{opacity:0;-webkit-transform:scale(0);}336     5%{opacity:0;-webkit-transform:scale(0);}337     8%{opacity:1;-webkit-transform:scale(1);}338     60%{opacity:1;-webkit-transform:scale(1);}339     62%{opacity:0;-webkit-transform:scale(1.5);}340     100%{opacity:0;-webkit-transform:scale(0);}341 }342 @-o-keyframes ani-zoom{343     0%{opacity:0;-o-transform:scale(0);}344     5%{o								
  • 上一篇:使用Echarts实现动态曲线图表
  • 下一篇:png