下面是动画效果：

 

下面是源码：

<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. window.frame

    定义和用法 frames 属性返回窗口中所有命名的框架. 该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>.属性 frames.leng ...

  2. 6410实现网卡(DM9000A)收发功能及ARP协议实现

    1. 网卡硬件结构(DM9000A) 网卡的实质就是MAC通过MII接口控制PHY的过程. MAC主要负责数据帧的构建.数据差错检查.传送控制等. PHY是物理接口收发器,属于物理层,当它收到MAC过 ...

  3. python面向对象编程

    面向对象编程,简称OOP, object oriented programming OOP编程的三大特性:封装,继承,多态 1. 封装 把功能的实现细节封装起来,不对外暴露.只留出入接口. 2. 继承 ...

  4. TUniConnection连接

    ChangeFileExt RealTime_Server.ini: [Config]FromConStr=DBTYPE=0|SERVER=127.0.0.1|PORT=7788|DBNAME=jzx ...

  5. 《SSM框架搭建》二.mybatis3，spring4整合

    感谢学习文章来自http://www.cnblogs.com/xdp-gacl/p/4271627.html,spring3修改为spring4.还有提示驱动过期的问题,是由于使用了mysql-con ...

  6. TJI读书笔记15-持有对象

    TJI读书笔记15-持有对象 总览 类型安全和泛型 Collection接口 添加元素 List 迭代器 LinkedList 栈 Set Map Queue Collection和Iterator ...

  7. mysql5.7忘记密码

    注意:mysql5.7 user表密码字段由password改为authentication_string 1.service mysql stop 2.mysqld_safe --skip-gran ...

  8. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  9. Git相关文章

    1.Git教程 2.Git常用命令整理 3.EGit(Git Eclipse Plugin)使用

  10. php限定时间内同一ip只能访问一次

    建立一个数据表 CREATE TABLE `clicks` ( `ip` INT UNSIGNED NOT NULL , `time1` INT UNSIGNED NOT NULL , `time2` ...