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

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

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

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

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代码：

 ;;}
 .container{ width:750px; 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;
 ;
 ;
     overflow:hidden;
     border-radius:0 70px 0 50px;
 }
 .shadow{
     display:block;
     width:130px;
     height:70px;
     position:absolute;
 ;
 ;
     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%;
 ;
     margin-top:-30px;
     border-radius:60%;
 }
 .basic:before{
     content:"";
     display:block;
     width:10px;
     height:11px;
     position:absolute;
     left:15px;
     top:15px;
 ;
     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;
 ;
 ;
     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;
 ;
     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;
 ;
     left:-1px;
     top:13px;
 ;
     margin:0 auto;
     border-radius:60%;
     transform:rotate(150deg);
     -webkit-transform:rotate(150deg);
     -o-transform:rotate(150deg);
     animation:colour 20s ease-in infinite;
     -webkit-animation:colour 20s ease-in infinite;
     -o-animation:colour 20s ease-in infinite;
 }
 @keyframes colour{
     0%{background:#000;}
     35%{background:#000;}
     40%{background:#f00;}
     100%{background:#f00;}
 }
 @-webkit-keyframes colour{
     0%{background:#000;}
     35%{background:#000;}
     40%{background:#f00;}
     100%{background:#f00;}
 }
 @-o-keyframes colour{
     0%{background:#000;}
     35%{background:#000;}
     40%{background:#f00;}
     100%{background:#f00;}
 }
 /*******三勾玉 开始*******/
 .hook{
     width:92%;
     height:92%;
     position:absolute;
 ;
 ;
     top:5%;
     margin:0 auto;
     border-radius:60%;
 }
 .hook .bar{
     display:block;
     width:100%;
     height:100%;
     position:absolute;
 ;
 ;
     border-radius:60%;
 }
 .hook .bar b{
     display:block;
     width:8px;
     height:8px;
     background:#000;
     position:absolute;
 ;
 ;
     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;
 ;
     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;
 ;
     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;
 ;
 ;
     border-radius:0 70px 0 50px;
 }
 .trans .bar{
     display:block;
     width:9px;
     height:9px;
     background:#000;
     position:absolute;
     top:50%;
 ;
     margin:-4px 0 0 -4px;
     border-radius:60%;
 }
 .trans .bar:after{
     content:"";
     display:block;
     width:11px;
     height:12px;
     position:absolute;
     top:-13px;
     left:-13px;
 ;
     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 20s ease-out infinite;
     -webkit-animation:ani-narrow 20s ease-out infinite;
     -o-animation:ani-narrow 20s ease-out infinite;
 }
 @keyframes ani-narrow{
 ;transform:scale(1);}
 ;transform:scale(1);}
 ;transform:scale(0);}
 ;transform:scale(0);}
 ;transform:scale(1);}
 ;transform:scale(1);}
 }
 @-webkit-keyframes ani-narrow{
 ;-webkit-transform:scale(1);}
 ;-webkit-transform:scale(1);}
 ;-webkit-transform:scale(0);}
 ;-webkit-transform:scale(0);}
 ;-webkit-transform:scale(1);}
 ;-webkit-transform:scale(1);}
 }
 @-o-keyframes ani-narrow{
 ;-o-transform:scale(1);}
 ;-o-transform:scale(1);}
 ;-o-transform:scale(0);}
 ;-o-transform:scale(0);}
 ;-o-transform:scale(1);}
 ;-o-transform:scale(1);}
 }
 .ani-zoom{
     animation:ani-zoom 20s linear infinite;
     -webkit-animation:ani-zoom 20s linear infinite;
     -o-animation:ani-zoom 20s linear infinite;
 }
 @keyframes ani-zoom{
 ;transform:scale(0);}
 ;transform:scale(0);}
 ;transform:scale(1);}
 ;transform:scale(1);}
 ;transform:scale(1.5);}
 ;transform:scale(0);}
 }
 @-webkit-keyframes ani-zoom{
 ;-webkit-transform:scale(0);}
 ;-webkit-transform:scale(0);}
 ;-webkit-transform:scale(1);}
 ;-webkit-transform:scale(1);}
 ;-webkit-transform:scale(1.5);}
 ;-webkit-transform:scale(0);}
 }
 @-o-keyframes ani-zoom{
 ;-o-transform:scale(0);}
 ;-o-transform:scale(0);}
 ;-o-transform:scale(1);}
 ;-o-transform:scale(1);}
 ;-o-transform:scale(1.5);}
 ;-o-transform:scale(0);}
 }
 .ani-rotateHook{
     animation:ani-rotateHook 20s ease-in infinite;
     -webkit-animation:ani-rotateHook 20s ease-in infinite;
     -o-animation:ani-rotateHook 20s ease-in infinite;
 }
 @keyframes ani-rotateHook{
 ;transform:scale(0) rotate(0);}
 ;transform:scale(0) rotate(0);}
 ;transform:scale(1) rotate(-360deg);}
 ;transform:scale(1) rotate(-360deg);}
 ;transform:scale(1.8) rotate(-540deg);}
 ;transform:scale(0) rotate(0);}
 }
 @-webkit-keyframes ani-rotateHook{
 ;-webkit-transform:scale(0) rotate(0);}
 ;-webkit-transform:scale(0) rotate(0);}
 ;-webkit-transform:scale(1) rotate(-360deg);}
 ;-webkit-transform:scale(1) rotate(-360deg);}
 ;-webkit-transform:scale(1.8) rotate(-540deg);}
 ;-webkit-transform:scale(0) rotate(0);}
 }
 @-o-keyframes ani-rotateHook{
 ;-o-transform:scale(0) rotate(0);}
 ;-o-transform:scale(0) rotate(0);}
 ;-o-transform:scale(1) rotate(-360deg);}
 ;-o-transform:scale(1) rotate(-360deg);}
 ;-o-transform:scale(1.8) rotate(-540deg);}
 ;-o-transform:scale(0) rotate(0);}
 }
 .ani-rotateTube{
     animation:ani-rotateTube 20s ease-in-out infinite;
     -webkit-animation:ani-rotateTube 20s ease-in-out infinite;
     -o-animation:ani-rotateTube 20s ease-in-out infinite;
 }
 @keyframes ani-rotateTube{
 ;transform:scale(0) rotate(0);}
 ;transform:scale(0) rotate(0);}
 ;transform:scale(1) rotate(-360deg);}
 ;transform:scale(1) rotate(-360deg);}
 ;transform:scale(1) rotate(-360deg);}
 }
 @-webkit-keyframes ani-rotateTube{
 ;-webkit-transform:scale(0) rotate(0);}
 ;-webkit-transform:scale(0) rotate(0);}
 ;-webkit-transform:scale(1) rotate(-360deg);}
 ;-webkit-transform:scale(1) rotate(-360deg);}
 ;-webkit-transform:scale(1) rotate(-360deg);}
 }
 @-o-keyframes ani-rotateTube{
 ;-o-transform:scale(0) rotate(0);}
 ;-o-transform:scale(0) rotate(0);}
 ;-o-transform:scale(1) rotate(-360deg);}
 ;-o-transform:scale(1) rotate(-360deg);}
 ;-o-transform:scale(1) rotate(-360deg);}
 }
 .ani-shadow{
     animation:ani-shadow 20s linear infinite;
     -webkit-animation:ani-shadow 20s linear infinite;
     -o-animation:ani-shadow 20s linear infinite;
 }
 @keyframes ani-shadow{
 ;box-shadow:none;}
 ;box-shadow:none;}
 ;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;}
 ;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;}
 ;box-shadow:none;}
 ;box-shadow:none;}
 }
 @-webkit-keyframes ani-shadow{
 ;box-shadow:none;}
 ;box-shadow:none;}
 ;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;}
 ;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;}
 ;box-shadow:none;}
 ;box-shadow:none;}
 }
 @-o-keyframes ani-shadow{
 ;box-shadow:none;}
 ;box-shadow:none;}
 ;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;}
 ;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;}
 ;box-shadow:none;}
 ;box-shadow:none;}
 }
 .ani-narrow,.ani-zoom,.ani-rotateHook,
 .ani-rotateTube,.ani-shadow,.eyes .line:after{
     animation-fill-mode:forwards;
     -webkit-animation-fill-mode:both;
     -o-animation-fill-mode:both;
 }

纯css3制作写轮眼开眼及进化过程的更多相关文章

8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
CSS源码之纯css3制作的哆啦a梦图片
本文章向大家介绍一个纯css3制作的哆啦a梦图像,主要巧妙的使用了css3的border-radius属性,需要的朋友介意参考一下本文章的源码. 效果图: 源码 <!doctype html&g ...
纯CSS3制作卡通场景汽车动画效果
前言今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
纯CSS3制作的“Ribbons”效果
在看具体每个demo之前,我们一起来看下面一个截图: 上图是一个典型的“Ribbons”各部位的示意图,但每一个“Ribbons”并不会都使用上图示意的各个部分,在下面的实例中大家可以明显的看到或者 ...
纯CSS3制作九款可爱复古相机
前言掐指一算,快两个月没写博客分享了.好吧,我就只是在准备校招而已.现在已经有满意的offer了,所以我就回来啦!这两个月过得挺煎熬也挺充实的.具体细说估计得长篇大论,我就不闲扯了.总之呢,越努力, ...
移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...
纯CSS3制作超级漂亮又实用的加载小图标
先来一张各种效果的预览图,其实代码并不复杂,关键看自己如何运用. <!doctype html> <head> <meta charset="utf-8&quo ...
纯CSS3制作皮卡丘动画壁纸
前言明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以 ...
纯CSS3制作进度条源代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...

随机推荐

Oracle导入导出
Oracle 10g 已经引入了数据泵(点击Data Dump)技术,这项技术和之前的exp/imp有哪些好处呢,简单的来说就是恢复和备份速度非常快: 在说明数据泵的使用方法之前,我们先来了解二者的区 ...
archlinux 加载loop模块，且设定loop设备个数
如果loop模块没有编译进内核就要先加载loop模块 modprobe loop 然后更改/etc/modprobe.d/modprobe.conf(有些文章写是在/etc/modprobe.conf ...
mybatis generator 自动生成dao层映射代码
资源: doc url :http://www.mybatis.org/generator/ download:https://github.com/mybatis/generator/release ...
codevs 3110 二叉堆练习3
3110 二叉堆练习3 http://codevs.cn/problem/3110/ 题目描述 Description 给定N(N≤500,000)和N个整数(较有序),将其排序后输出. 输入描述 I ...
[LeetCode] Design Hit Counter 设计点击计数器
Design a hit counter which counts the number of hits received in the past 5 minutes. Each function a ...
MATLAB 成对T检验（paired-ttest）
学过的统计知识忘光了,飞速恶补了一下能用到的,此篇多有错误今后看到再改= =||| 成对t检验(Paired ttest) 将两组测量值对应相减,再将所得差值看作服从正态分布的随机变量,然后再做关于差 ...
hihoCoder太阁最新面经算法竞赛15
hihoCoder太阁最新面经算法竞赛15 Link: http://hihocoder.com/contest/hihointerview24 题目1 : Boarding Passes 时间限制: ...
Redis系列之（二）：Redis主从同步，读写分离
1. Redis主从同步 Redis支持主从同步.数据可以从主服务器向任意数量的从服务器上同步,同步使用的是发布/订阅机制. 2. 配置主从同步 Mater Slave的模式,从Slave向Maste ...
《UNIX环境高级编程》笔记——2.标准和实现
随着UNIX各种衍生版本不断发展壮大,标准化工作就十分必要.其实干啥事都是这样,玩的人多了,必须进行标准化. 一.UNIX标准 1.1 ISO C(ANSI C) ANSI:Amerocan Nato ...
Android动态加载框架汇总
几种动态加载的比较 1.Tinker 用途:热修复 GitHub地址:https://github.com/Tencent/tinker/ 使用:http://www.jianshu.com/p/f6 ...

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

纯css3制作写轮眼开眼及进化过程的更多相关文章

随机推荐

热门专题