CSS3做动物走路效果
CSS3做动物走路效果
采用的CSS3切换序列帧做
核心代码如下
<pre>.game .role {
width: 60px;
height: 86px;
position: absolute;
top: -83px;
background-image: url(../images/role5.png);
background-repeat: no-repeat
}
.roleRunAm {
-webkit-animation-name: roleRunAm;
-webkit-animation-duration: 0.9s;
-webkit-animation-timing-function: steps(6);
-webkit-animation-iteration-count: infinite;
animation-name: roleRunAm;
animation-duration: 0.9s;
animation-timing-function: steps(6);
animation-iteration-count: infinite
}
@-webkit-keyframes roleRunAm {
0% {
background-position: 0 0
}
100% {
background-position: -365px 0
}
}
@keyframes roleRunAm {
0% {
background-position: 0 0
}
100% {
background-position: -365px 0
}
}
</pre>
365px就是序列帧图片的宽度
序列帧图(
<pre>../images/role5.png</pre>
<img class="alignnone size-medium wp-image-692" src="http://newmiracle.cn/wp-content/uploads/2016/12/role5-300x71.png" alt="role5" width="300" height="71" />
播放动画直接addclass roleRunAm 停止就removeclass 这个可以结合位移做 而且不会卡出现闪烁的现象 如果用其他setTimeout 递归切换图片肯定卡
但是此方法不能用自适应
最新文章
- Using View and Data API with Meteor
- Delphi XE5-XE8 以上 如何发布文件到工程中
- jQuery验证元素是否为空的两种常用方法
- HDU 5313 Bipartite Graph (二分图着色,dp)
- HW3.5
- angularJs ionic phoneGap 分享
- 验证码 Demo
- CentOS 安装mysql-5.7.10(glibc版)
- Swagger和Postman的配置和使用
- 转《trackingjs+websocket+百度人脸识别API,实现人脸签到》流程
- ref实现输入框聚焦
- centos7创建docker tomcat镜像
- 20172306 《Java程序设计与数据结构》第七周学习总结
- C语言编程流程
- awk调用shell
- oraclejdbc
- javascript中childNodes与children的区别
- Nginx + Lua + 共享内存
- 分布式缓存系统 Memcached 工作线程初始化
- mac 系统配置(一)