[游戏开发] 利用 CSS3 实现僵尸行走动画

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> 利用 CSS3 实现僵尸行走动画 -> 正文阅读

[游戏开发]利用 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;
    }
}

查看效果

项目总结：