成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何用css3制作火影忍者寫(xiě)輪眼開(kāi)眼至輪回眼及進(jìn)化過(guò)程-創(chuàng)新互聯(lián)

這篇文章主要介紹“如何用css3制作火影忍者寫(xiě)輪眼開(kāi)眼至輪回眼及進(jìn)化過(guò)程”，在日常操作中，相信很多人在如何用css3制作火影忍者寫(xiě)輪眼開(kāi)眼至輪回眼及進(jìn)化過(guò)程問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何用css3制作火影忍者寫(xiě)輪眼開(kāi)眼至輪回眼及進(jìn)化過(guò)程”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),株洲企業(yè)網(wǎng)站建設(shè),株洲品牌網(wǎng)站建設(shè),網(wǎng)站定制,株洲網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,株洲網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

具體分析如下：

今天是火影忍者（漫畫(huà)）宣告完結(jié)的日子。看過(guò)火影的朋友都知道，寫(xiě)輪眼是什么，這里就不多說(shuō)了。下面就直接展示整個(gè)效果，上張圖，先睹為快：

如何用css3制作火影忍者寫(xiě)輪眼開(kāi)眼至輪回眼及進(jìn)化過(guò)程

目前已經(jīng)測(cè)試 IE10、Firefox瀏覽器、Chrome瀏覽器、Opera瀏覽器、360瀏覽器（兩種模式）兼容已通過(guò)。

溫馨提示：以上瀏覽器版本號(hào)均新的；動(dòng)畫(huà)過(guò)程中每個(gè)階段大約會(huì)停留5秒鐘，希望你不會(huì)中幻術(shù)^_^。

點(diǎn)擊此處在線演示。（由于是基于css3實(shí)現(xiàn)的特效，建議使用支持css3的火狐或谷歌等瀏覽器在線瀏覽）

點(diǎn)擊此處本站下載。

HTML代碼如下：

代碼如下:

<div class="container">
   <!--左眼開(kāi)始-->
   <div class="eyesBoxs pullLeft">
       <div class="profile skewLeft"></div>
       <div class="shadow skewLeft"></div>
       <div class="basic ani-narrow"></div>
       <div class="eyes ani-zoom">
           <div class="line">          
               <div class="hook ani-rotateHook">
                   <span class="bar"><b></b></span>
                   <span class="bar"><b></b></span>
                   <span class="bar"><b></b></span>
               </div>
               <div class="tube ani-rotateTube">
                   <span class="bar"></span>
                   <span class="bar"></span>
                   <span class="bar"></span>
               </div>
           </div>
       </div>
       <div class="trans skewLeft">
           <span class="bar ani-shadow"></span>
       </div>
   </div>
   <!--左眼結(jié)束-->
   <!--右眼開(kāi)始-->
   <div class="eyesBoxs pullRight">
       <div class="profile skewRight"></div>
       <div class="shadow skewRight"></div>
       <div class="basic ani-narrow"></div>
       <div class="eyes ani-zoom">
           <div class="line">          
               <div class="hook ani-rotateHook">
                   <span class="bar"><b></b></span>
                   <span class="bar"><b></b></span>
                   <span class="bar"><b></b></span>
               </div>
               <div class="tube ani-rotateTube">
                   <span class="bar"></span>
                   <span class="bar"></span>
                   <span class="bar"></span>
               </div>
           </div>
       </div>
       <div class="trans skewRight">
           <span class="bar ani-shadow"></span>
       </div>
   </div>
   <!--右眼結(jié)束-->
</div>


CSS代碼如下：

代碼如下:


*{margin:0;padding:0;}
.container{ width:800px; height:200px; margin:30px auto;overflow:hidden; background:#000; position:relative;}
.eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}
.pullLeft{left:100px;}
.pullRight{right:100px;}
.profile{
   width:130px;
   height:70px;
   background:#fff;
   position:absolute;
   top:0;
   left:0;
   overflow:hidden;
   border-radius:0 70px 0 50px;
}
.shadow{
   display:block;
   width:130px;
   height:70px;
   position:absolute;
   top:0;
   z-index:5;
   border-radius:0 90px 0 60px;
   box-shadow:5px 12px 2px 5px rgba(0,0,0,.25) inset;
}
.skewLeft{
   transform:skewX(15deg);
   -webkit-transform:skewX(15deg);
   -o-transform:skewX(15deg);
}
.skewRight{
   transform:skewX(-15deg) scale(-1,1);
   -webkit-transform:skewX(-15deg) scale(-1,1);
   -o-transform:skewX(-15deg) scale(-1,1);
}
.basic{
   width:60px;
   height:60px;
   background:#000;
   position:absolute;
   top:50%;
   left:50%;
   z-index:10;
   margin-top:-30px;
   border-radius:60%;
}
.basic:before{
   content:"";
   display:block;
   width:10px;
   height:11px;
   position:absolute;
   left:15px;
   top:15px;
   z-index:100;
   border-radius:60%;
   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));
   -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));
   -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));
}
.pullLeft .basic{
   margin-left:-33px;
}
.pullRight .basic{
   margin-left:-27px;
}
.eyes{
   width:55px;
   height:55px;
   background:#ff0000;
   position:absolute;
   top:8px;
   border-radius:60%;
   box-shadow:0 0 2px 4px #bd0000 inset,0 0 0 2px #000;
}
.pullLeft .eyes{left:35px;}
.pullRight .eyes{right:35px;}
.eyes .line{
   width:64%;
   height:64%;
   background:#ff0000;
   position:absolute;
   right:0;
   left:0;
   top:10px;
   margin:0 auto;
   border-radius:60%;
   box-shadow:0 0 2px 0 #b20000 inset;
}
.eyes .line:before{
   content:"";
   display:block;
   width:10px;
   height:11px;
   position:absolute;
   left:3px;
   top:4px;
   z-index:100;
   border-radius:60%;
   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));
   -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));
   -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));
}
.eyes .line:after{
   content:"";
   display:block;
   width:10px;
   height:10px;
   position:absolute;
   background:#000;
   right:0;
   left:-1px;
   top:13px;
   z-index:100;
   margin:0 auto;
   border-radius:60%;
   transform:rotate(150deg);
   -webkit-transform:rotate(150deg);
   -o-transform:rotate(150deg);
   animation:colour 0.5s ease-in 7s;
   -webkit-animation:colour 0.5s ease-in 7s;
   -o-animation:colour 0.5s ease-in 7s;
}
@keyframes colour{
   0%{
       background:#000;
   }
   100%{
       background:#f00;
   }
}
@-webkit-keyframes colour{
   0%{
       background:#000;
   }
   100%{
       background:#f00;
   }
}
@-o-keyframes colour{
   0%{
       background:#000;
   }
   100%{
       background:#f00;
   }
}
.hook{
   width:92%;
   height:92%;
   position:absolute;
   right:0;
   left:0;
   top:5%;
   margin:0 auto;
   border-radius:60%;
}
.hook .bar{
   display:block;
   width:100%;
   height:100%;
   position:absolute;
   left:0;
   top:0;
   border-radius:60%;
}
.hook .bar b{
   display:block;
   width:8px;
   height:8px;
   background:#000;
   position:absolute;
   left:0;
   bottom:0;
   border-radius:60%;
}
.hook .bar b:after{
   content:"";
   width:8px;
   height:8px;
   border-color:transparent transparent #000 transparent;
   border-style:solid;
   border-width:0 0 5px 0;
   position:absolute;
   top:-1px;
   left:-3px;
   z-index:100;
   border-radius:0 0 0 70%;
   transform:rotate(-75deg);
   -webkit-transform:rotate(-75deg);
   -o-transform:rotate(-75deg);
}
.hook .bar:nth-child(1){
   transform:rotate(10deg);
   -webkit-transform:rotate(10deg);
   -o-transform:rotate(10deg);
}
.hook .bar:nth-child(2){
   transform:rotate(130deg);
   -webkit-transform:rotate(130deg);
   -o-transform:rotate(130deg);
}
.hook .bar:nth-child(3){
   transform:rotate(250deg);
   -webkit-transform:rotate(250deg);
   -o-transform:rotate(250deg);
}
.tube{
   width:93%;
   height:93%;
   position:absolute;
   right:0;
   left:0px;
   top:2px;
   margin:0 auto;
   background:#000;
   border-radius:60%;
}
.tube .bar{
   display:block;
   width:10px;
   height:20px;
   border-style:solid;
   border-width:0 0 0 10px;
   border-color:transparent transparent transparent black;
   position:absolute;
   border-radius:100% 0 0 0;
}
.tube .bar:nth-child(1){
   top:-10px;
   left:2px;
   transform:rotate(-10deg);
}
.tube .bar:nth-child(2){
   bottom:0px;
   right:-10px;
   transform:rotate(105deg);
   -webkit-transform:rotate(105deg);
   -o-transform:rotate(105deg);
}
.tube .bar:nth-child(3){
   bottom:-3px;
   left:-10px;
   transform:rotate(235deg);
   -webkit-transform:rotate(235deg);
   -o-transform:rotate(235deg);
}
.trans{
   width:130px;
   height:70px;
   position:absolute;
   overflow:hidden;
   top:0;
   left:0;
   border-radius:0 70px 0 50px;
}
.trans .bar{
   display:block;
   width:9px;
   height:9px;
   background:#000;
   position:absolute;
   top:50%;
   z-index:2;
   margin:-4px 0 0 -4px;
   border-radius:60%;
}
.trans .bar:after{    
   content:"";
   display:block;
   width:11px;
   height:12px;
   position:absolute;
   top:-13px;
   left:-13px;
   z-index:100;
   border-radius:60%;
   background:rgba(250,250,250,.85);
}
.pullLeft .trans .bar{
   transform:skewX(-15deg);
   -webkit-transform:skewX(-15deg);
   -o-transform:skewX(-15deg);
}
.pullLeft .trans .bar{left:48%;}
.pullRight .trans .bar{
   transform:skewX(-15deg) scale(-1,1);
   -webkit-transform:skewX(-15deg) scale(-1,1);
   -o-transform:skewX(-15deg) scale(-1,1);
}
.pullRight .trans .bar{right:48%;}
.ani-narrow{
   animation:ani-narrow 0.5s linear 1s;
   -webkit-animation:ani-narrow 0.5s linear 1s;
   -o-animation:ani-narrow 0.5s linear 1s;
}
@keyframes ani-narrow{
   from{
       transform:scale(1);
   }
   to{
       opacity:0;
       transform:scale(0);
   }
}
@-webkit-keyframes ani-narrow{
   from{
       -webkit-transform:scale(1);
   }
   to{
       opacity:0;
       -webkit-transform:scale(0);
   }
}
@-o-keyframes ani-narrow{
   from{
       -o-transform:scale(1);
   }
   to{
       opacity:0;
       -o-transform:scale(0);
   }
}
.ani-zoom{
   animation:ani-zoom 11s linear 0.8s;
   -webkit-animation:ani-zoom 11s linear 0.8s;
   -o-animation:ani-zoom 11s linear 0.8s;
}
@keyframes ani-zoom{
   0%{
       opacity:0;
       transform:scale(0);
   }
   6%{
       opacity:1;
       transform:scale(1);
   }
   95%{
       opacity:1;
       transform:scale(1);
   }
   100%{
       opacity:0;
       transform:scale(1.5);
   }
}
@-webkit-keyframes ani-zoom{
   0%{
       opacity:0;
       -webkit-transform:scale(0);
   }
   6%{
       opacity:1;
       -webkit-transform:scale(1);
   }
   95%{
       opacity:1;
       -webkit-transform:scale(1);
   }
   100%{
       opacity:0;
       -webkit-transform:scale(1.5);
   }
}
@-o-keyframes ani-zoom{
   0%{
       opacity:0;
       -o-transform:scale(0);
   }
   6%{
       opacity:1;
       -o-transform:scale(1);
   }
   95%{
       opacity:1;
       -o-transform:scale(1);
   }
   100%{
       opacity:0;
       -o-transform:scale(1.5);
   }
}
.ani-rotateHook{
   animation:ani-rotateHook 5s ease-in 2.5s;
   -webkit-animation:ani-rotateHook 5s ease-in 2.5s;
   -o-animation:ani-rotateHook 5s ease-in 2.5s;
}
@keyframes ani-rotateHook{
   0%{
       opacity:0;
       transform:scale(0) rotate(0);
   }
   15%{
       opacity:1;
       transform:scale(1) rotate(-360deg);
   }
   90%{
       opacity:1;
       transform:scale(1) rotate(-360deg);
   }
   100%{
       opacity:0;
       transform:scale(1.8) rotate(-540deg);
   }
}
@-webkit-keyframes ani-rotateHook{
   0%{
       opacity:0;
       -webkit-transform:scale(0) rotate(0);
   }
   15%{
       opacity:1;
       -webkit-transform:scale(1) rotate(-360deg);
   }
   90%{
       opacity:1;
       -webkit-transform:scale(1) rotate(-360deg);
   }
   100%{
       opacity:0;
       -webkit-transform:scale(1.8) rotate(-540deg);
   }
}
@-o-keyframes ani-rotateHook{
   0%{
       opacity:0;
       -o-transform:scale(0) rotate(0);
   }
   15%{
       opacity:1;
       -o-transform:scale(1) rotate(-360deg);
   }
   90%{
       opacity:1;
       -o-transform:scale(1) rotate(-360deg);
   }
   100%{
       opacity:0;
       -o-transform:scale(1.8) rotate(-540deg);
   }
}
.ani-rotateTube{
   animation:ani-rotateTube 5s ease-in-out 6.5s;
   -webkit-animation:ani-rotateTube 5s ease-in-out 6.5s;
   -o-animation:ani-rotateTube 5s ease-in-out 6.5s;
}
@keyframes ani-rotateTube{
   0%{
       opacity:0;
       transform:scale(0) rotate(0);
   }
   30%{
       opacity:1;
       transform:scale(1) rotate(-360deg);
   }
   100%{
       opacity:1;
       transform:scale(1) rotate(-360deg);
   }
}
@-webkit-keyframes ani-rotateTube{
   0%{
       opacity:0;
       -webkit-transform:scale(0) rotate(0);
   }
   30%{
       opacity:1;
       -webkit-transform:scale(1) rotate(-360deg);
   }
   100%{
       opacity:1;
       -webkit-transform:scale(1) rotate(-360deg);
   }
}
@-o-keyframes ani-rotateTube{
   0%{
       opacity:0;
       -o-transform:scale(0) rotate(0);
   }
   30%{
       opacity:1;
       -o-transform:scale(1) rotate(-360deg);
   }
   100%{
       opacity:1;
       -o-transform:scale(1) rotate(-360deg);
   }
}
.ani-shadow{
   animation:ani-shadow 1s linear 11s;
   -webkit-animation:ani-shadow 1s linear 11s;
   -o-animation:ani-shadow 1s linear 11s;
}
@keyframes ani-shadow{
   0%{
       opacity:0;
       box-shadow:none;
   }
   100%{
       opacity:1;
       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;
   }
}
@-webkit-keyframes ani-shadow{
   0%{
       opacity:0;
       box-shadow:none;
   }
   100%{
       opacity:1;
       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;
   }
}
@-o-keyframes ani-shadow{
   0%{
       opacity:0;
       box-shadow:none;
   }
   100%{
       opacity:1;
       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;
   }
}
.ani-narrow,
.ani-zoom,
.ani-rotateHook,
.ani-rotateTube,
.ani-shadow,
.eyes .line:after{
   animation-fill-mode:both;
   -webkit-animation-fill-mode:both;
   -o-animation-fill-mode:both;
}


到此，關(guān)于“如何用css3制作火影忍者寫(xiě)輪眼開(kāi)眼至輪回眼及進(jìn)化過(guò)程”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

當(dāng)前標(biāo)題：如何用css3制作火影忍者寫(xiě)輪眼開(kāi)眼至輪回眼及進(jìn)化過(guò)程-創(chuàng)新互聯(lián)
標(biāo)題URL：http://jinyejixie.com/article12/dchogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站策劃、建站公司、軟件開(kāi)發(fā)、網(wǎng)站改版、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化
调兵山市| 武定县| 永和县| 台州市| 富平县| 高清| 石泉县| 策勒县| 中阳县| 馆陶县| 吉林省| 黎平县| 辰溪县| 定南县| 新乐市| 四会市| 中西区| 遂宁市| 化德县| 都昌县| 云南省| 延庆县| 桐庐县| 万年县| 石首市| 筠连县| 东乌| 多伦县| 高雄市| 新宾| 马公市| 葵青区| 洞口县| 柘荣县| 盘山县| 德令哈市| 宕昌县| 五华县| 东台市| 陇西县| 邹城市|