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背景_动力节点Java学院整理
Jul 11 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 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
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
Node.js的特点详解
2017/02/03 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
介绍Python的Django框架中的QuerySets
2015/04/20 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
详解python tkinter 图片插入问题
2020/09/03 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
班主任新年寄语
2014/04/04 职场文书
单位委托书
2014/10/15 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
《正比例》教学反思
2016/02/23 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang