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

這篇文章主要介紹“如何用css3制作火影忍者寫輪眼開眼至輪回眼及進(jìn)化過程”，在日常操作中，相信很多人在如何用css3制作火影忍者寫輪眼開眼至輪回眼及進(jìn)化過程問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”如何用css3制作火影忍者寫輪眼開眼至輪回眼及進(jìn)化過程”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(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ò)營銷,網(wǎng)絡(luò)優(yōu)化,株洲網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

具體分析如下：

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

如何用css3制作火影忍者寫輪眼開眼至輪回眼及進(jìn)化過程

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

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

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

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

HTML代碼如下：

代碼如下:

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制作火影忍者寫輪眼開眼至輪回眼及進(jìn)化過程”的學(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ī)砀鄬?shí)用的文章！

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

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

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

猜你還喜歡下面的內(nèi)容