html⽕影忍者⽹页设计作品，纯css3制作的⽕影忍者写轮眼开眼
⾄轮回眼及进化过程实例...
本⽂实例讲述了纯css3制作的⽕影忍者中写轮眼开眼⾄轮回眼及进化过程实现⽅法。分享给⼤家供⼤家参考。具体分析如下：
今天是⽕影忍者(漫画)宣告完结的⽇⼦。看过⽕影的朋友都知道，写轮眼是什么，这⾥就不多说了。下⾯就直接展⽰整个效果，上张图，先睹为快：
⽬前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器(两种模式)兼容已通过。
温馨提⽰：以上浏览器版本号均最新的；动画过程中每个阶段⼤约会停留5秒钟，希望你不会中幻术^_^。
点击此处在线演⽰。(由于是基于css3实现的特效，建议使⽤⽀持css3的⽕狐或⾕歌等浏览器在线浏览)
点击此处本站下载。
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{
html网页设计csswidth: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;
}