下面是动画效果：

 

下面是源码：

<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. 自动化测试 using System.Windows.Automation;

    frameworke3.0 及以上 using System.Windows.Automation; UIAutomationClient.dll UIAutomationClientsideProv ...

  2. Raspberry pi之wifi设置-3

    1.配件套装里最好有wifi网卡,非常小如下图 插入Raspberry pi的USB口,用lsusb来查看USB设备列表如下 pi@raspberrypi~/Desktop $ lsusb Bus 0 ...

  3. （Hibernate进阶）Hibernate映射——一对一双向关联映射（六）

    上一篇博客我们介绍了一对一的单向关联映射,单向是指只能从人(Person)这端加载身份证端(IdCard),但是反过来,不能从身份证端加载人得信息.如图所示: 关键原因在于对象模型具有方向性: 单向: ...

  4. nvm

    nvm install stable #安装最新稳定版 node,现在是 5.0.0 nvm install 4.2.2 #安装 4.2.2 版本 nvm install 0.12.7 #安装 0.1 ...

  5. scrollbar_test

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. 向IPython Notebook中导入.py文件

    IPython Notebook使用起来简洁方便,但是有时候如果需要导入一个现有的.py文件,则需要注意选择导入的方法以达到不同的效果.目前遇到3种方法. (1) 将文件保存为.ipynb格式,直接拖 ...

  7. Json与Bean互转，Timestamp类型的问题

    Json与Java Bean互相转换时,Bean中的Timestamp字段是无法直接处理的,需要实现两个转换器. DateJsonValueProcessor的作用是Bean转换为Json时将Time ...

  8. Linux下apache+phppgadmin安装配置

    1.安装pg 安装PostgreSQL数据库 修改pg_hba.conf配置文件,使得数据库可以通过外部访问. 具体可以配置为: # TYPE DATABASE USER ADDRESS METHOD ...

  9. jQuery 正则选择器

    http://james.padolsey.com/snippets/regex-selector-for-jquery/ A while ago I published an article exp ...

  10. vim的树形菜单NERDTREE的设置

    网上比较好的一篇文章:http://coolshell.cn/articles/1679.html http://coolshell.cn/articles/11312.html 1.Vim安装NER ...