利用 CSS3 实现僵尸行走动画

codingap

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

阅读量785

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/iamcnnetiger/article/details/127072608

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>