下面是动画效果：

 

下面是源码：

<html>

<head>

<style type="text/css">

	.zoombie {

		width: 55px;

		height: 85px;

		animation: play 1s steps(10) infinite ;

	        background-image:url(http://images2015.cnblogs.com/blog/897447/201612/897447-20161230113142929-1143877954.png);

	}

	@keyframes play {

		from{

			background-position: 0px;

		}

		to{

			background-position: -550px;

		}

	}

</style>

</head>

<body>

	<div class="zoombie"></div>

</body>

</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. Stopwatch 类

    Stopwatch 为计时器的实现. 主要属性方法 属性和方法 说明 static GetTimestamp() 如果Stopwatch使用高分辨率的性能计数器,则返回该计数器的当前值:如果Stopw ...

  2. java反射，ReflectUtils

    public class ReflectUtils { /** * 通过构造函数实例化对象 * @param className 类的全路径名称 * @param parameterTypes 参数类 ...

  3. Linux 性能监控之命令行工具

    引言 对于系统和网络管理员来说每天监控和调试Linux系统的性能问题是一项繁重的工作.这些命令行工具可以在各种Linux系统下使用,可以用于监控和查找产生性能问题的原因.这个命令行工具列表提供了足够的 ...

  4. [转载] 在java中为什么变量1000 = 1000 返回false，但是100=100返回true？

    ps:题目的意思是指定义相同内容的不同变量之间的==比较.如果直接比较(100 == 100)的结果是true. 运行以下代码: Integer a = 1000, b = 1000; System. ...

  5. Android test---JUnit

    JUnit 单元测试 Android的单元测试基础也是比较简单,同样还是测试相加方法是否正确,测试用例还是用1+1?=2来个简单的Android单元测试: 1..打开eclipse,新建一个proje ...

  6. 关于Delphi中多线程传递参数的简单问题

    http://bbs.csdn.net/topics/390513469/ unit uThread; interface uses Classes; type Th = class(TThread) ...

  7. Openstack Day1简介及虚拟环境搭建

    本文章仅作为作者本人存档记忆!恕不详细展开内容!   openstack kilo版本重要组件(module)简介 ======================================= Ke ...

  8. PowerDesigner 逆向中 Name和Comment互换

    在使用PowerDesigner对数据库进行概念模型和物理模型设计时,一般在NAME或Comment中写中文,在Code中写英文.Name用来显 示,Code在代码中使用,但Comment中的文字会保 ...

  9. Delphi JCL JEDI使用 jclDebug

    开源 https://github.com/project-jedi/jcl jclDebug 下载jcl,还要下载https://github.com/project-jedi/jedi里的2个in ...

  10. android 简单打jar包

    先建议一个moduel,先写一个下载图片代码: public class LoadTest extends AsyncTask<Void,Void,byte[]>{ public stat ...