首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例

Posted in HTML / CSS onNovember 11, 2014

本文实例讲述了纯css3制作的火影忍者中写轮眼开眼至轮回眼及进化过程实现方法。分享给大家供大家参考。具体分析如下：

今天是火影忍者（漫画）宣告完结的日子。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快：

纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例

目前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器（两种模式）兼容已通过。

温馨提示：以上浏览器版本号均最新的；动画过程中每个阶段大约会停留5秒钟，希望你不会中幻术^_^。

点击此处在线演示。（由于是基于css3实现的特效，建议使用支持css3的火狐或谷歌等浏览器在线浏览）

点击此处本站下载。

HTML代码如下：

复制代码
代码如下:

<div class="container">
<!--左眼开始-->
<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>
<!--左眼结束-->
<!--右眼开始-->
<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>
<!--右眼结束-->
</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;
}

感兴趣的朋友可以测试运行一下本文实例~O(∩_∩)O~

纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例

- Author -

FlyLee云飞

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码
Dec 13 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 #HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 #HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 #HTML / CSS
一款CSS3实现多功能下拉菜单（带分享按）的教程
Nov 05 #HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 #HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 #HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 #HTML / CSS
J2EE面试题(19) UNIX面试题(27) Ruby面试题(15) 自我评价(886) Delphi面试题(13) MySQL面试题(19) PYTHON面试题(27) SOA面试题(9) Servlet面试题(20) 自我鉴定(671)
You might like
PHP往XML中添加节点的方法
2015/03/12 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python基于百度云文字识别API
2018/12/13 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Python requests上传文件实现步骤
2020/09/15 Python
PyCharm安装PyQt5及其工具（Qt Designer、PyUIC、PyRcc）的步骤详解
2020/11/02 Python
澳大利亚宠物商店：Petbarn
2017/11/18 全球购物
红色连衣裙精品店：Red Dress Boutique
2018/08/11 全球购物
加拿大城市本地限时优惠：Buytopia.ca
2018/09/19 全球购物
Bulk Powders意大利：运动补充在线商店
2019/02/09 全球购物
继电保护工岗位职责
2014/01/05 职场文书
信息总监管理职责范本
2014/03/08 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
办公室个人总结
2015/02/28 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
建国大业观后感600字
2015/06/01 职场文书
执行力心得体会范文
2016/01/11 职场文书
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android