利用 CSS3 实现僵尸行走动画

codingap

于 2022-09-27 16:19:25 发布

阅读量648

点赞数

分类专栏： Web HTML5 文章标签： css3 动画前端

本文链接：https://blog.csdn.net/iamcnnetiger/article/details/127072608

版权

Web 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

HTML5

2 篇文章 1 订阅

订阅专栏

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 实现动画效果

codingap

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
利用 CSS3 实现僵尸行走动画

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

扫一扫