下面是动画效果：

 

下面是源码：

<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. WinForm DataGridView分页功能

    WinForm 里面的DataGridView不像WebForm里面的GridView那样有自带的分页功能,需要自己写代码来实现分页,效果如下图: 分页控件  .CS: 1 using System; ...

  2. PHP5.6.15连接Sql Server 2008配置方案

    php5.6的如果想连接Sql Server 2008数据库,需要手动配置扩展和安装一个驱动. 下载SQL Server Driver for PHP的扩展包,64位系统的官方不支持,找到一个非官方的 ...

  3. Broadcom有线网卡在Windows 8/8.1/10下使用系统自带驱动会断网的解决办法

    出处:qiuyi21.cnblogs.com 1.下载最新正式版驱动程序 上Broadcom官方网站http://www.broadcom.com/support/ethernet_nic/downl ...

  4. jquery 获取日期时间

    获取JavaScript 的时间使用内置的Date函数完成 var mydate = new Date();mydate.getYear(); //获取当前年份(2位)mydate.getFullYe ...

  5. 关于reset.css的疑问：为什么一定要重置浏览器样式？

    自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...

  6. jQuery on 绑定的事件触发多次

    jquery用on绑定事件,在代码执行过程中,可能会遇到多次执行的情况. 解决方案是在on的事件前面加上一个off,再on. $('#btnBind').off('click').on('click' ...

  7. HDU1005

    Number Sequence  HDU-1005 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  8. nice-validator验证插件

    主要是作为form表单的验证,密码,确认密码的验证,远程验证的功能: 1:先导包:nice-validator 2:引入文件css,js 3: 使用 使用文档:http://www.niceue.co ...

  9. log4net日志在app.config中assembly不起作用

    log4net 1.2.15.0日志在app.config中assembly不起作用,必须 1.手动调用方法log4net.Config.XmlConfigurator.Configure()来初始化 ...

  10. SQL Server 数据库的安全管理（登录、角色、权限）

    ---数据库的安全管理 --登录:SQL Server数据库服务器登录的身份验证模式:1)Windows身份验证.2)Windows和SQL Server混合验证 --角色:分类:1)服务器角色.服务 ...