纯css3制作写轮眼开眼及进化过程
来源:互联网 发布:hifi播放器 知乎 编辑:程序博客网 时间:2024/04/27 17:57
今天是火影忍者(漫画)宣告完结的日子,也是我首发的第一个随笔。看过火影的朋友都知道,写轮眼是什么,这里就不多说了。下面就直接展示整个效果,上张图,先睹为快:
目前已经测试 IE10、Firefox浏览器、Chrome浏览器、Opera浏览器、360浏览器(两种模式)兼容已通过。
温馨提示:以上浏览器版本号均最新的;动画过程中每个阶段大约会停留5秒钟,希望你不会中幻术^_^。
在线演示 源码下载
HTML代码:
1 <div class="container"> 2 <!--左眼开始--> 3 <div class="eyesBoxs pullLeft"> 4 <div class="profile skewLeft"></div> 5 <div class="shadow skewLeft"></div> 6 <div class="basic ani-narrow"></div> 7 <div class="eyes ani-zoom"> 8 <div class="line"> 9 <div class="hook ani-rotateHook">10 <span class="bar"><b></b></span>11 <span class="bar"><b></b></span>12 <span class="bar"><b></b></span>13 </div>14 <div class="tube ani-rotateTube">15 <span class="bar"></span>16 <span class="bar"></span>17 <span class="bar"></span>18 </div>19 </div>20 </div>21 <div class="trans skewLeft">22 <span class="bar ani-shadow"></span>23 </div>24 </div>25 <!--左眼结束-->27 <!--右眼开始-->28 <div class="eyesBoxs pullRight">29 <div class="profile skewRight"></div>30 <div class="shadow skewRight"></div>31 <div class="basic ani-narrow"></div>32 <div class="eyes ani-zoom">33 <div class="line"> 34 <div class="hook ani-rotateHook">35 <span class="bar"><b></b></span>36 <span class="bar"><b></b></span>37 <span class="bar"><b></b></span>38 </div>39 <div class="tube ani-rotateTube">40 <span class="bar"></span>41 <span class="bar"></span>42 <span class="bar"></span>43 </div>44 </div>45 </div>46 <div class="trans skewRight">47 <span class="bar ani-shadow"></span>48 </div>49 </div>50 <!--右眼结束-->51 </div>
0 0
- 纯css3制作写轮眼开眼及进化过程
- 纯CSS3制作轮播图
- 【图片】纯CSS3制作背景图
- div+css3纯手工制作登录页
- 纯CSS3制作皮卡丘动画壁纸
- 纯CSS3进度条制作-Pure CSS3 Progress Bar
- CSS3轮回写轮眼制作
- 纯css3制作的几个社交媒体网站的图标
- 用纯css3和html制作一些泡沫对话框
- 用纯css3和html制作一些泡沫对话框
- 纯css3制作的太阳地球月亮效果
- 【转】纯CSS3制作的Tab选项卡
- 漂亮的加载等待动画,用纯CSS3制作
- 纯CSS3制作逼真的iphone 6手机模型
- 纯css3 伪元素制作旋转小风扇
- 【29】纯css3制作的冒着气泡的瓶子
- css3学习过程----制作曲线阴影效果
- VC 纯资源DLL制作及调用
- 【LeetCode】Implement strStr()
- 无CD-ROM,用U盘安装Ubuntu
- 生产环境下实践DDD中的规约模式
- android SQLite 优化(二)使用ContentValues 优化 insert
- 17JavaScript教程【第二章】数据类型
- 纯css3制作写轮眼开眼及进化过程
- mysql触发器
- C++中的关联容器set用法
- 第十一周项目五 本年第几天
- Git 常用命令速查表(三)
- 【特殊的图+DP】【11月校赛】大家一起玩游戏
- Erlang二进制数据处理
- PagedList
- 图形化GDB调试(TUI模式)