下面是动画效果：

 

下面是源码：

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. 	.zoombie {
  5. 		width: 55px;
  6. 		height: 85px;
  7. 		animation: play 1s steps(10) infinite ;
  8. 	        background-image:url(http://images2015.cnblogs.com/blog/897447/201612/897447-20161230113142929-1143877954.png);
  9. 	}
  10. 	@keyframes play {
  11. 		from{
  12. 			background-position: 0px;
  13. 		}
  14. 		to{
  15. 			background-position: -550px;
  16. 		}
  17. 	}
  18. </style>
  19. </head>
  20. <body>
  21. 	<div class="zoombie"></div>
  22. </body>
  23. </html>

使用的图片：

CSS3 animation 的尝试的更多相关文章

  1. 实现了一个百度首页的彩蛋——CSS3 Animation简介

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  2. css3 animation实现风车转动

    项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...

  3. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  4. CSS3 Animation Cheat Sheet：实用的 CSS3 动画库

    CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...

  5. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  6. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  7. 第四十一课：CSS3 animation详解

    animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...

  8. CSS3 animation 与JQ animate()的区别

    CSS3 与 JQ 根本区别 css3 animation与jQuery animate()区别在于实现机制不同 C3和JQ 完成动画的优缺点 1.css3中的过渡和animation动画都是基于cs ...

  9. CSS3(animation, trasfrom)总结

    CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: @-浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 @k ...

随机推荐

  1. 十、DG

    1.DG是dependency graph,我认为是依赖图,和DAG(有向无环图)的区别:DAG用来做场景管理,每个node代表的不是tranform就是shape,有父子关系. DG是代表了每个实体 ...

  2. Linux文件及目录权限解析

    Linux系统9位基础权限体系 文件权限   * r权限 可读          对文件具有读取及查看文件内容的全新啊   * w权限 可写        对文件具有新增.修改文件内容的权限     ...

  3. 正确理解ThreadLocal

    想必很多朋友对 ThreadLocal并不陌生,今天我们就来一起探讨下ThreadLocal的使用方法和实现原理.首先,本文先谈一下对ThreadLocal的理 解,然后根据ThreadLocal类的 ...

  4. nil与NULL的区别

    首先nil表示无值,任何变量在没有被赋值之前的值都为nil,对于真假判断,只有nil与false表示假,其余均为真.而NULL是一个宏定义,值为0.并且,nil一般赋值给空对象,NULL一般赋值给ni ...

  5. CentOS 7 下的LAMP实现以及基于https的虚拟主机

    系统环境:CentOS 7Apache 2.4php 5.4MariaDB 5.5 项目需求:创建3个虚拟主机,分别架设phpMyadmin,wordpress,Discuz其中phpMyadmin提 ...

  6. C#pdf 切割成图片

    引用 using Ghostscript.NET;using Ghostscript.NET.Rasterizer; 需要安装 exe文件 public static GhostscriptVersi ...

  7. 用CMake构建Qt5的Visual Studio工程

    使用Visual Studio构建Qt工程的方法有很多种,可以使用Visual Studio自带的功能手动创建配置工程,也可以创建pro文件,然后通过VS的Qt插件导入进行创建.还有一种方式是通过CM ...

  8. 在Android中自定义捕获Application全局异常，可以替换掉系统的强制退出对话框（很有参考价值与实用价值）

    转载自: http://blog.csdn.net/jdsjlzx/article/details/7606423

  9. poj3678 Katu Puzzle 2-SAT

    Katu Puzzle Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6714   Accepted: 2472 Descr ...

  10. Loadrunner ---集合点设置

    测试场景,实现用户登录的200并发: 1.录制登录退出脚本,且登录退出放aciton中 2.在登录的地方设置集合点 设置集合点有如下4中方式: 1)在要插入集合点的地方,右击鼠标按如下图操作: