steps animation
2024-08-27 14:46:48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
@-webkit-keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
div{
width:140px;
height:140px;
background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<div></div>
</body>
PS 摘自：http://www.cnblogs.com/Fengzp/p/5548493.html#
最新文章
- WebForm控件--2016年12月29日
- SharePoint 2013 图文开发系列之可视化WebPart
- 设计模式之美：Bridge（桥接）
- NOIP2010提高组 关押罪犯 -SilverN
- C# ？（问号）的三个用处（转载）
- GCD的用法
- OLAP如何实现数据的聚合计算-分析过程
- <创建和销毁对象>经验法则——考虑用静态工厂方法代替公有构造方法
- C#对HTML转译需要注意的问题
- javaweb学习总结二十三(servlet开发之线程安全问题)
- 李洪强iOS开发本人集成环信的经验总结_07_监听好友请求
- 显示器 RUIGE瑞鸽高清显示器TL-S1700HD
- vue组件（将页面公用的头部组件化）
- 研华ADAM 4000系列型号枚举值
- 乡下人重拾MVC——创建视图
- calc()
- numpy 从入门到遗忘
- DB操作-用批处理执行Sql语句
- day01 初识Python
- 【转】Unity3D中脚本的执行顺序和编译顺序