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

随机推荐

Spark概述
背景目前按照大数据处理类型来分大致可以分为:批量数据处理.交互式数据查询.实时数据流处理,这三种数据处理方式对应的业务场景也都不一样: 关注大数据处理的应该都知道Hadoop,而Hadoop的核心为 ...
AspNetPager 多条件分页查询
AspNetPager 这个分页控件一般做后台基本都知道的,我就不多说了(说明与下载链接:http://www.webdiyer.com/Controls/AspNetPager),嘿嘿!其实我也是刚 ...
Ubuntu 一直掉线以及连不上网解决办法
新装了一个Ubuntu 系统16.04才使用的时候一切顺利但是过了两三天就会出现频繁掉线的情况于是上网找大神们的解决办法把文件 /etc/ppp/options 里面的一个数值改大一点 l ...
python-进程&线程
进程(process):相当于一个程序要运行时所需的所有资源的集合,相当于一个车间,不工作两个进程之间的数据不共享,完全不独立,互相不能访问. 线程(thread):一道单一指令的控制流,寄生在进程 ...
Linux 管道的实现模型
//管道的实现 //当前目录下实现命令"ls | wc -w" #include <stdio.h> #include <stdlib.h> #includ ...
jquery-leonaScroll-1.3-自定义竖向自适应滚动条插件
下载链接地址:https://share.weiyun.com/9ac3ca3fb29648bb1aad1b83a76b123c (密码:4y9t)[含mini版] 欢迎使用leonaScroll-1 ...
Backbone.js应用基础
前言: Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery:其主要组件有模型,视图,集合,路由:与后台的交 ...
详解三种缓存过期策略LFU，FIFO，LRU（附带实现代码）
在学操作系统的时候,就会接触到缓存调度算法,缓存页面调度算法:先分配一定的页面空间,使用页面的时候首先去查询空间是否有该页面的缓存,如果有的话直接拿出来,如果没有的话先查询,如果页面空间没有满的时候, ...
spring定时器，定时器一次执行两次的问题
Spring 定时器方法一:注解形式配置文件头加上如下: xmlns:task="http://www.springframework.org/schema/task" htt ...
IRandomAccessStream, IBuffer, Stream, byte[] 之间相互转换
/* * 用于实现 IRandomAccessStream, IBuffer, Stream, byte[] 之间相互转换的帮助类 */ using System;using System.IO;us ...

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

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

随机推荐

热门专题