CSS3 animation 的尝试
下面是动画效果：
下面是源码：
<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 的尝试的更多相关文章
- 实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...
- css3 animation实现风车转动
项目中经常有用到动画效果,比如Loading.风车转动等等.最简单的办法是使用gif,但是gif在半透明背景下有白边,体验不友好,好在现在可以使用css3的anmiation来实现动画效果,极大的提升 ...
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3 Animation Cheat Sheet：实用的 CSS3 动画库
CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 第四十一课：CSS3 animation详解
animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...
- CSS3 animation 与JQ animate()的区别
CSS3 与 JQ 根本区别 css3 animation与jQuery animate()区别在于实现机制不同 C3和JQ 完成动画的优缺点 1.css3中的过渡和animation动画都是基于cs ...
- CSS3(animation, trasfrom)总结
CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: @-浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 @k ...
随机推荐
- Android自动化学习笔记之MonkeyRunner：用Eclipse执行MonkeyRunner脚本
Info: 初步学习,难免会有疏漏,以后我会不断修改补全,直到完美.转载请注明出处,谢谢. 2014-10-11: 初版 2014-10-16: 完善 ------------------------ ...
- 如何存session，取session
存session: Session["codes"] =要存的session字段 用哈希函数存多个: System.Collections.Hashtable hs = new S ...
- JS判断input按了回车键
参考代码如下: <input type="textbox" id="textbox1" onkeypress="CheckInfo" ...
- Java是目前最广泛的_______编程语言
计算机网络 注意:在配置环境变量时,classpath是为找文件服务的
- ubuntu安装mysql-python出错，EnvironmentError: mysql_config not found
安装mysql-python包出错 Downloading MySQL-python-.zip (108kB) % |████████████████████████████████| 112kB 1 ...
- 这是个简单的UTF8转码的小Demo
NSString *name = @"你好啊"; NSString *string = [NSString stringWithFormat:@"%@",nam ...
- Foundation框架—数据类（NSData）
一 NSData的使用 .string -> data NSString *str = @"changxiangweilai"; NSData *data = ...
- cmd中用PING命令时,出现'Ping' 不是内部或外部命令 解决方案
在cmd中用PING命令时,出现'Ping' 不是内部或外部命令,也不是可运行的程序或批处理文件.先了解一下内容:1.可执行文件.命令文件和批处理文件以.exe或者.com或者.bat为扩展名的文件分 ...
- BAT的面试经验_摘抄
一.心态 心态很重要! 心态很重要! 心态很重要! 重要的事情说三遍,这一点我觉得是必须放到前面来讲. 找工作之前,有一点你必须清楚,就是找工作是一件看缘分的事情,不是你很牛逼,你就一定能进你想进的公 ...
- axis 理解
前言 使用numpy sum(a,axis=0)的时候,对axis参数比较费解,和直觉不太一样,故此记录 b = np.arange(12).reshape(3,4) b array([[ 0, 1, ...