纯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——SparkContext简单分析
本篇文章就要根据源码分析SparkContext所做的一些事情,用过Spark的开发者都知道SparkContext是编写Spark程序用到的第一个类,足以说明SparkContext的重要性:这里先 ...
浏览器控制台js代码与后台不同步
原因:浏览器会缓存js 如果是将js代码直接通过<script>标签插入jsp页面中则不存在这个问题在加载页面的时候会重新加载js代码如果直接将js代码以文件的形式引入,那么每次在修改 ...
Linux虚拟机突然网络不能用了但是主机能ping㣈
虚拟ping主机时出现: linux network is unreachable 搞了好久搞不定,之前都是好的突然这样了. 解决办法: 第一步: "虚拟机设置"中的" ...
[LeetCode] The Skyline Problem 天际线问题
A city's skyline is the outer contour of the silhouette formed by all the buildings in that city whe ...
[LeetCode] Longest Valid Parentheses 最长有效括号
Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...
mtk flash tool，Win7 On VirtualBox
SP_Flash_Tool_exe_Windows_v5.1624.00.000 Win7 在 VirtualBox, 安裝 mtk flash tool, v5.1628 在燒錄時會 fail. v ...
Linux配置JDK1.7和Resin4.0
1.安装JDK1.7 (1)下载官网下载路径:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-18802 ...
neo4j-备份、恢复
neo4j备份命令(本例linux) neo4j-backup 命令使用: ./neo4j-backup -full -from single://[machine IP] -to ~/backup- ...
bzoj 3506 && bzoj 1552 splay
查最小值,删除,翻转... 显然splay啊... #include<iostream> #include<cstdio> #include<algorithm> ...
php截取中文无乱码
在PHP中需要对字符串进行截取,如果没有装mb扩展(mb_substr函数),对中文截取就需要进行相应的处理.下面是对字符串 "世s界s的功s\\\夫萨的mn是非得失sdf dsf dsf ...

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

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

随机推荐

热门专题