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 ...
随机推荐
- java写入excel文件poi
java写入excel文件 java写入excel文件poi,支持xlsx与xls,没有文件自动创建 package com.utils; import java.io.File; import ja ...
- angularJS全选功能实现
最近在做的一个项目要增加全选和反选功能,之前只做过JQ版的全选和反选. 实现效果: 1.点击全选checkbox可以切换全选和全部清空 2.点击列表中的checkbox,当全部选中时全选选中 3.在全 ...
- c#全局鼠标事件以及鼠标事件模拟
最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...
- 【ORM】--FluentNHibernate之AutoMapping详解
上篇文章详细讨论了FluentNHibernate的基本映射的使用方法,它的映射基本用法是跟NHibernate完全一样的,首先要创建数据库链接配置文件,然后编写Table的Mappin ...
- ASP.NET MVC4框架揭秘 源代码下载
http://files.cnblogs.com/artech/asp.net.mvc.4.samples.rar
- NHibernate系列文章二十三：NHibernate查询之Criteria查询（附程序下载）
摘要 上一篇文章介绍了NHibernate HQL,他的缺点是不能够在编译时发现问题.如果数据库表结构有改动引起了实体关系映射的类有改动,要同时修改这些HQL字符串.这篇文章介绍NHibernate面 ...
- 初学python之安装Jupyter notebook
一开始安装python的时候,安装的是最新版的python3.6的最新版.而且怕出问题,选择的都是默认安装路径.以为这样总不会出什么问题.一开始确实这样,安装modgodb等一切顺利.然而在安装jup ...
- VS2008下,aspx页面设计模式消失，只有黑白字体
版权声明:本文为博主原创文章,未经博主允许不得转载. RT,在工具选项里面重新设定的时候,报错,说一部分文件无法安装. 寻找一晚上,终于有了解决方案,供以后参考. luanwey(大陆响尾蛇)(不做温 ...
- tomcat gzip compression not working for large js files
solution 1: <Connector port="8080" protocol="HTTP/1.1" connectionTimeout=&quo ...
- div水平居中且垂直居中
<style> .vertical-center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, ...