html5实现GIF动画!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 180px;
height: 300px;
margin: 50px auto;
overflow: hidden;
}
.run{
width: 180px;
height: 300px;
background: url(images/images/charector.png) no-repeat ;//图片素材自己找。。。
-webkit-animation:run 700ms steps(7) infinite;
}
@-webkit-keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1260px 0;
}
}
</style>
</head>
<body>
<div class="box">
<div class="run">
</div>
</div>
</body>
</html>
本文转载自:http://www.cnblogs.com/qingxh/archive/2016/12/12/6164083.html
html5实现GIF动画!的更多相关文章
- HTML5树叶飘落动画
查看效果:http://keleyi.com/keleyi/phtml/css3/15.htm 请使用Chrome浏览器查看本效果. html源代码: <!DOCTYPE HTML> &l ...
- 8款超酷的HTML5 3D图片动画源码
1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...
- 9个超绚丽的HTML5 3D图片动画特效
在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...
- 16款最佳HTML5超酷动画演示及源码
1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用 ...
- 6款基于SVG的HTML5应用和动画
1.HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的.另外,动画 ...
- 基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 9个绚丽多彩的HTML5进度条动画赏析
进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发 ...
- HTML5 3D爱心动画及其制作过程
之前有看到过很多基于HTML5或者CSS3制作的爱心动画,不过基本上都是2D平面的,今天在国外的网站上看到一个基于HTML5 3D的爱心动画,对于HTML5爱好者来说,不免兴奋了一把.下面将分享一下这 ...
- 浪漫程序员 HTML5爱心表白动画
我们程序员在追求爱情方面也是非常浪漫的,下面是一位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画,画面非常温馨甜蜜,这样的创意很容易打动女孩,如果你是单身的程序员,也赶紧来制作自己的爱心 ...
- HTML5/jQuery雷达动画图表 图表配置十分简单
1.HTML5/jQuery雷达动画图表 图表配置十分简单 之前我们介绍过不少形形色色的HTML5图表了,像这款HTML5折线图表Aristochart是一款很不错的折线图表,这款HTML5 Canv ...
随机推荐
- LeetCode----204. Count Primes(Java)
package countPrimes204; /* * Description: * Count the number of prime numbers less than a non-negati ...
- java IO和NIO 的区别
Java NIO和IO的主要区别 下表总结了Java NIO和IO之间的主要差别. IO NIO 面向流 面向缓冲 阻塞IO 非 ...
- Android 读取Assets中资源
//读取文件 private static String getFromAssets(Context context, String fileName) { String result = " ...
- 批量解密SQLSERVER数据库中的各种对象的工具dbForge SQL Decryptor2.1.11
参考地址: http://www.cnblogs.com/lyhabc/p/3505677.html SQLPROMPT5.3对各种加密对象的解密测试 SQL2005解密已经被加密的存储过程 昨天ah ...
- 花40分钟写一个-CBIR引擎-代码公开
浏览网页的时候发现一篇不错的文章"用Python和OpenCV创建一个图片搜索引擎的完整指南"http://python.jobbole.com/80860/.作者在浏 ...
- PowerShell调用jira rest api实现对个人提交bug数的统计
通过PowerShell的invoke-webrequest和net.client联合实现个人指定项目jira提交数的统计,其中涉及到了JSON对象的提交,代码如下: $content = @{use ...
- UML的概念模型
为 了理解UML,需要形成该语言的概念模型,这要求学习建模的3个要素:UML的基本构造块.支配这些构造块如何放在一起的规则和一些运用于整个UML的公 共机制.如果掌握了这些思想,就能够读懂UML模型, ...
- Infragistics 汉化
Infragistics 汉化实例: Infragistics.Shared.ResourceCustomizer rc=Infragistics.Win.UltraWinGrid.Resources ...
- java中的构造函数
在c++中就学习了构造函数,今天学习java又碰到了构造函数,重新写一篇博客来理解一下 其实直接听这个词并不能理解这是什么,但其实看了它的作用,就很好理解了 当创建一个对象时,往往需要做一些初始化工作 ...
- static变量在php和java中的生命周期
1. java的static变量伴随着java虚拟机的退出而消亡,java虚拟机运行期间,static变量一直存在 2. php的static变量只针对一次请求(一次php文件的执行),php文件执行 ...