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 ...
随机推荐
- linux出现user account has expired解决方案
SUSE Linux 用户user1登陆不了,确认密码没错,使用root用户登陆,su - user1 提示密码不对,passwd user1提示帐户过期user account hasexpired ...
- linux pam 控制模式
工作类别(type).流程栈(stack)和控制模式(control) Linux-PAM 工作的"类别"(type) PAM 的具体工作主要有以下四种类别(type):accou ...
- java SE编写图形应用程序
借鉴了java 核心技术卷1 并参考http://www.jb51.net/article/56158.htm 添加了JTextField的使用. ####################### ...
- 拒绝访问 temp 目录。用来运行 XmlSerializer 的标识“IIS APPPOOL\UGAS”没有访问 temp 目录的足够权限
在部署IIS时候会出现下图错误,拒绝访问 temp 目录.用来运行 XmlSerializer 的标识“IIS APPPOOL\UGAS”没有访问 temp 目录的足够权限 解决方法: 在IIS信息管 ...
- Android常用客户端测试工具
Emmagee GT iTest PowerTutor 网速限制 Root Explorer ApkEditor 陆续添加...
- CoreData总结
Core Data,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还原成OC对象.在此数据操作期间,我们不需要编写任何 ...
- Java实现emf图片自己留转png(jpg)图片字节流
private byte[] emfToPng(InputStream is){ // InputStream inputStream=null; byte[] by=null; EMFInputSt ...
- @MappedSuperclass注解的使用说明
转载自:http://blog.sina.com.cn/s/blog_7085382f0100uk4p.html 基于代码复用和模型分离的思想,在项目开发中使用JPA的@MappedSuperclas ...
- Winform button按钮设置快捷键
1)Text属性命名时后面&加键名,如:文件(&F) 2)添加一个ContextMenuStrip控件,同时在Items里添加一个项,并为项设置快捷键,把Visible设置为false ...
- 为控件Button设置快捷键（组合键）
控件MenuStrip和ContextMenuStrip可通过ShortCcutKeys属性设置快捷键,而控件Button没有ShortcutKey属性,如何为控件Button设置快捷键呢(组合件键) ...