利用 CSS3 实现僵尸行走动画

CSS3的出现使用Web页面的开发和展示更加的有趣和多样，同时页面动画的实现也更加的简单，此项目利用 CSS3 中提供的 @keyframes 和 animation 语法实现僵尸行走动画。

项目教学目标：

学习 CSS3 中动画实现效果（animation）
学习利用绝对定位实现元素的水平和垂直居中

第一步：编写动画主窗口，实现水平和垂直居中

项目目录结构如下：

sprite/ --根目录
├── css/ --css文件目录
└── images/ --图像文件目录
index.html --入口html文件

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>实训在线-僵尸动画</title><link rel="stylesheet" href="css/style.css">
</head><body><div class="container"><div class="sprite"></div></div>
</body></html>

style.css

.container {/* 绝对定位，结合transform: translate(-50%, -50%) 实现元素的水平和垂直居中 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.container .sprite {width: 200px;height: 312px;border: 1px solid #000000;
}

查看效果

第二步：实现行走动画效果

利用 CSS3 中的 @keyframes 和 animation 属性，通过移动图像的位移来实现动画效果。

图像大小：2000 * 312
总共：10帧
每一帧：200 * 312

完整的 style.css 代码

.container {/* 绝对定位，结合transform: translate(-50%, -50%) 实现元素的水平和垂直居中 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.container .sprite {width: 200px;height: 312px;/* 设置背景图片 */background-image: url(../images/walking.png);/* 播放动画：时长 2 秒一次，让整个动画在 10 个帧之间相互切换，infinite 表示让动画无限次播放 */animation: play 2s steps(10) infinite;-webkit-animation: play 2s steps(10) infinite;-moz-animation: play 2s steps(10) infinite;
}/* 标准语法 */
@keyframes play {from {background-position: 0px;}to {background-position: -2000px;}
}@-webkit-keyframes play {from {background-position: 0px;}to {background-position: -2000px;}
}@-moz-keyframes play {from {background-position: 0px;}to {background-position: 2000px;}
}

查看效果

项目总结：

CSS 中利用绝对定位（position: absolute;），结合transform: translate(-50%, -50%); 实现元素的水平和垂直居中。
CSS3 中利用 @keyframes 和 animation 实现动画效果

利用 CSS3 实现僵尸行走动画相关推荐

HTML中淡入的动画效果,CSS3实现页面淡入动画特效代码
现在的css3有很多效果可以直接替换flash了,下面我来给大家介绍一个利用CSS3实现页面淡入动画特效代码,希望此教程对各位同学会有所帮助. 利用CSS3动画属性"@keyframes ...
html的动画效果实现无限轮播,利用 CSS3 实现的无缝轮播功能代码
无缝轮播的原理图 1 . html的架构 : JavaScript: /*轮播图*/ function banner() { var banner = document.querySelector(' ...
css3实现的僵尸走路动画
css3实现的僵尸走路动画,css3真是强大,趣味十足,貌似实用性不强. 定义html代码 <div id="wrapper"><div class=" ...
css3僵尸走路动画js特效
下载地址 css3+图片实现的僵尸走路动画特效,走路动画是连续的图片动作组成的特效,很多小游戏里的动作就是用的这种方式. dd:
5分钟教你利用css3动画实现奔跑的北极熊效果
实现原理:利用css3动画中的animation-timing-function的steps(),让一张有连续动作图片一段一段的在页面上显示出来,从而实现动画效果. 1.需要素材: 2.准备一个div ...
利用CSS3动画让图片动起来
利用CSS3动画让图片动起来原材料:一张png图片实现原理:利用了两个动画bear.move,bear动画让小熊奔跑起来,就是通过控制背景图片的位置让每张小熊图片依次闪过,从而看上去就像跑起来一样 ...
html 自动滚动通知,利用CSS3实现文字滚动通知动画特效
特效描述:利用CSS3实现文字滚动通知动画特效.利用CSS3实现文字滚动通知动画特效代码结构 1. HTML代码 .menu-list{list-style:none; width:300px; ...
css 动画飞机,利用CSS3实现炫酷的飞机起飞的动画
这篇文章给大家演示如何只利用CSS3就能实现飞机起飞的动画,实现后的效果很赞,有需要的朋友可以参考借鉴. 有点遗憾的是云朵不好画,用图片代替了实例源码 Plane *{margin:0;paddin ...
利用CSS3动画制作摩天轮
本篇文章向大家介绍利用CSS3动画制作摩天轮旋转特效,代码很简单,还不赶紧学起来,发给你的小朋友看看吧! 运行效果: 代码: <!DOCTYPE html> <html>< ...

利用 CSS3 实现僵尸行走动画

第一步：编写动画主窗口，实现水平和垂直居中

第二步：实现行走动画效果

利用 CSS3 实现僵尸行走动画相关推荐

最新文章

热门文章