下面是动画效果:

 

下面是源码:

<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. C#小程序飞行棋地图绘制

    1. 初始化地图,在绘制时可先将地图进行初始化,用数组来存储关卡的位置,然后利用循环给地图中 关卡所在处赋予代表关卡的值. 关键代码如下 /// <summary> /// 初始化游戏地图 ...

  2. hbase 协处理器

    一.服务端1.安装Protobuf2.RPC proto 定义文件:Examples.protooption java_package = "org.apache.hadoop.hbase. ...

  3. asp.net中的ListBox控件添加双击事件

    问题:在Aspx页里的ListBox A中添加双击事件,将选中项添加到另一个ListBox B中,双击ListBox B中的选中项,删除当前选中项 页面: <asp:ListBox ID=&qu ...

  4. 写 test-case心得

    最近,写ticket较多,由于每天有忙不完的工作加不完的班,心里逐渐有一个小人儿在抱怨了.此种情况下,慢慢的写case时边变得懒散,想钻空闲,于是便简简单单总结几个纲要便完事.提交test-case到 ...

  5. C++中输入输出的重定向

    重定向,就是: 把 原来的 cin 从键盘输入 改为从文件输入. 把 原来的 cout 向屏幕输出 改为输出到文件. 例如: cin>>line; 原来要从键盘拍入.现在自动到某文件读取, ...

  6. Android开发--页面切换

    1.创建android项目.项目文档如下 2.activity_main布局,Androidv4包里自带的,既然是自带的那么直接拿来用就可以了,当然前提是你得工程里有v4包 <LinearLay ...

  7. ubuntu 'Unable to correct problems, you have held broken packages' 错误

    在用apt 安装软件时,有时会用国内的源以加快下载速度. 但是在使用ubuntu 14.04的过程中,这一过程可能会导致错误“Unable to correct problems, you have ...

  8. php:微信公众号token验证失败原因、验证码显示不出来的问题

    ob_clean(); 问题描述: 用微信官方提供的demo验证token是成功的,但是放到自己网站的框架上进行token验证老是提示"token验证失败",经过检查(用生成日志的 ...

  9. avalon使用笔记

    //保存取消操作(使用双向绑定) <div ms-controller='test'> <table border="1" style="border- ...

  10. Winform 中DataGridView控件添加行标题

    有很多种方法. 1.可以在DataGridView控件中的RowStateChanged事件改变行标题单元格的值(Row.HeaderCell.Value) /// <summary> / ...