纯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 ...

随机推荐

iOS 浅复制和深复制的深层理解，含示例
转载:https://www.zybuluo.com/MicroCai/note/50592 版权归 @MicroCai 所有以下是正文: 浅复制就是指针拷贝:深复制就是内容拷贝. 集合的浅复制 ( ...
在WINDOWS下初步试用OMNET++ 4
闲扯: 最近实习公司要做ZIGBEE,我是对这个兴趣不大,但工作还是要做的,目前帮着找找合适的仿真软件,什么NS-2啊,OPNET啊. 正文: 这个软件软件直接去官网下载就好了,免费开源. 安装也比较 ...
linux系统如何管理文件
硬盘中的静态文件和inode(i节点) (1)文件平时都在存放在硬盘中的,硬盘中存储的文件以一种固定的形式存放的,我们叫静态文件. (2)一块硬盘中可以分为两大区域:一个是硬盘内容管理表项,另一个是真 ...
基于pcDuino-V2的无线视频智能小车 - pcduino上的网络编程
通过获取从串口发送上来的数据已经和上位机的连接通信和图像发送.已经对设备的控制 https://github.com/qq2216691777/pcduino_smartcar-pcduino
[No0000A5]批处理常用命令大全
1.Echo 命令打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置.语法echo [{on|off}] [message]Sample: echo off e ...
jQuery.ajaxComplete() 函数详解
ajaxComplete()函数用于设置当AJAX请求完成(无论成功或失败)时执行的回调函数. 这是一个全局AJAX事件函数,用于为所有AJAX请求的ajaxComplete事件绑定事件处理函数.当A ...
解读ASP.NET 5 & MVC6系列（9）：日志框架
框架介绍在之前的.NET中,微软还没有提供过像样的日志框架,目前能用的一些框架比如Log4Net.NLog.CommonLogging使用起来多多少少都有些费劲,和java的SLF4J根本无法相比. ...
[LeetCode] Maximum Product Subarray 求最大子数组乘积
Find the contiguous subarray within an array (containing at least one number) which has the largest ...
C#进阶系列——WebApi 身份认证解决方案：Basic基础认证
前言:最近,讨论到数据库安全的问题,于是就引出了WebApi服务没有加任何验证的问题.也就是说,任何人只要知道了接口的url,都能够模拟http请求去访问我们的服务接口,从而去增删改查数据库,这后果想 ...
GDB调试汇编堆栈过程分析
GDB调试汇编堆栈过程分析分析过程这是我的C源文件:click here 使用gcc - g example.c -o example -m32指令在64位的机器上产生32位汇编,然后使用gdb ...

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

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

随机推荐

热门专题