下面是动画效果：

 

下面是源码：

<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. poj1113

    http://poj.org/problem?id=1113 完全时copy大神给的模版哦,结果再加一个小圆的周长就好啦 #include<stdio.h> #include<mat ...

  2. Python体验(07)-图形界面之菜单

    顺序安装以下程序: python解释器:https://www.python.org/downloads/ wxPython图形界面框架包:http://www.wxpython.org/ pycha ...

  3. java remote debug parameters

    java -agentlib:jdwp=transport=dt_socket,server=y,address=8000,suspend=n

  4. 关于handler

    1. 一个Handler只有一个队列;2. 在调用Handler.post(Runnable runnable)方法时,会将runnable封装成一个Message; 3. 在队列执行时,会判断当前的 ...

  5. pip UnicodeDecodeError: 'ascii' codec can't decode byte

    http://blog.csdn.net/computerms/article/details/48056103

  6. 使用 jquery 获取当前时间的方法

    我们在写一些效果时,经常要用到 jquery 获取当前时间,但是jquery 目前并没有提供直接获取当前时间的 api 或者函数,所以我们还是得用原生的 javascript 时间对象 Date 来获 ...

  7. Programming Entity Framework 翻译

    刚开始接触.net,c#语法应该说还没掌握好.学习实践的旅程就从linq和EF开始吧.感觉相比之前的开发方式,linq和EF方便好多. linq入门用了好久,因为c#不行,补习了2.0的泛型,3.0和 ...

  8. 使用Windows上的Eclipse 远程调试 linux下的Tomcat

    1:修改Linux上Tomcat的catalina.sh,第一行添加declare -x CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_sock ...

  9. NTFS u盘支持 - centos6

    uname -r bash-4.1# uname -r2.6.32-431.el6.x86_64 ---- http://repository.it4i.cz/mirrors/repoforge/re ...

  10. vim命令的妙用

    进来看到了一篇博文,讲述的是无插件Vim编程技巧,然后看到里面还有一些其余的关于vim的博文,感觉值得收藏:酷 壳 – CoolShell.cn 这里挑选出其中一篇,这也是自己已经学习过的: 无插件V ...