纯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索引梳理系列（十）- 直方图使用技巧及analyze table操作对直方图统计的影响（谨慎使用）
版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...
解决安装rpm包依赖关系的烦恼 - yum工具介绍及本地源配置方法
版权声明:本文发布于http://www.cnblogs.com/yumiko/,版权由Yumiko_sunny所有,欢迎转载.转载时,请在文章明显位置注明原文链接.若在未经作者同意的情况下,将本文内 ...
Ubuntu apt 常用命令
APT(the Advanced Packaging Tool)是Ubuntu 软件包管理系统的高级界面,Ubuntu 是基于Debian的,APT由几个名字以“apt-”打头的程序组成.apt-g ...
gcc/linux内核中likely、unlikely和__attribute__(section(""))属性
查看linux内核源码,你会发现有很多if (likely(""))...及if (unlikely(""))...语句,这些语句其实是编译器的一种优化方式,具 ...
Django 前后台的数据传递
Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): ...
关于对For循环嵌套优化的问题
1.案例描述由于一次Java面试的笔试题,当时没有写出很好的解决方案,特此专门撰写一篇博客来加以记录,方便日后的查看面试题目如下:从性能上优化如下代码并说明优化理由? for (int i = 0 ...
JSP动作元素——————理论篇
JSP动作元素的组成及作用 JSP使用Action来控制Servlet引擎的行为,可重复使用JavaBean组件. 常用Action: jsp:param 在 jsp:include.js ...
python框架之django
python框架之django 本节内容 web框架 mvc和mtv模式 django流程和命令 django URL django views django temple django models ...
Maven打包含有Main方法jar并运行
最近使用Kettle做定时数据抽取,因为Job更新或需求变更,修改Bug等种种原因,需要对重跑Job一般是针对每天的数据重跑一次.刚开始的做法是直接在自己的开发机器上重跑,这样速度比较慢,因为这时候你 ...
[LeetCode] Combination Sum IV 组合之和之四
Given an integer array with all positive numbers and no duplicates, find the number of possible comb ...

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

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

随机推荐

热门专题