CSS3+Sprite实现僵尸行走动画特效源码


Posted in HTML / CSS onJanuary 27, 2016

植物大战僵尸游戏相信大家都玩过吧,那么具体实现代码大家知道吗,下面小编给大家分享代码,在没分享代码之前先给大家展示下效果图:

CSS3+Sprite实现僵尸行走动画特效源码

css代码:

复制代码
代码如下:

@charset "utf-8";
/* CSS Document */
/* General CSS */
*{
padding:0px;
margin:0px;
}
body,html {
width:100%;
height:100%;
margin:0px;
padding:0px;
font-family: "Roboto", sans-serif;
font-size: 12px;
font-weight: 700;
}
/*DEMO CSS*/
body{
position:relative;
background: transparent url("../img/background.jpg") no-repeat scroll center top / cover;
background-attachment:fixed;
}
.zoombie {
/*Our png sprite is 2000px x 312px, then each frame is 200px x 312px*/
width: 200px;
height: 312px;
background-image: url("../img/walkingdead.png");
-webkit-animation: play 1.8s steps(10) infinite;
-moz-animation: play 1.8s steps(10) infinite;
-ms-animation: play 1.8s steps(10) infinite;
-o-animation: play 1.8s steps(10) infinite;
animation: play 1.8s steps(10) infinite ;
}
@-webkit-keyframes play {
from { background-position: 0px; }
to { background-position: -2000px; }
}
@-moz-keyframes play {
from { background-position: 0px; }
to { background-position: -2000px; }
}
@-ms-keyframes play {
from { background-position: 0px; }
to { background-position: -2000px; }
}
@-o-keyframes play {
from { background-position: 0px; }
to { background-position: -2000px; }
}
@keyframes play {
from { background-position: 0px; }
to { background-position: -2000px; }
}
#wrapper {
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}

以上所述是小编给大家分享的CSS3+Sprite实现僵尸行走动画特效源码 ,希望对大家有所帮助。

HTML / CSS 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 #HTML / CSS
css3 border旋转时的动画应用
Jan 22 #HTML / CSS
CSS3实现swap交换动画
Jan 19 #HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 #HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 #HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 #HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 #HTML / CSS
You might like
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
js数据类型检测总结
2018/08/05 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python中条件判断语句的简单使用方法
2015/08/21 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
python第三方库学习笔记
2020/02/07 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
财务支持类个人的自我评价
2014/02/14 职场文书
交通事故代理词范文
2015/05/23 职场文书
早上好问候语大全
2015/11/10 职场文书
初中美术教学反思
2016/02/17 职场文书
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
mysql5.5中文乱码问题解决的有用方法
2022/05/30 MySQL