【CSS——Sprite Sheet 精灵图动画】西游记之西天取经（蓝桥杯真题-2419）【合集】

Rossy Yan

发布于 2025-02-08 13:09:21

6400

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

准备步骤

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── images 
│   ├── background.webp
│   ├── west_01.png
│   ├── west_02.png
│   ├── west_03.png 
│   └── west_04.png
└── index.html

其中：

js/echarts.js 是 ECharts 文件。
index.html 是主页面。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

wget https://labfile.oss.aliyuncs.com/courses/18164/The_journey_to_the_West.zip && unzip The_journey_to_the_West.zip && rm The_journey_to_the_West.zip

在浏览器中预览 index.html 页面初始化后动画只动一次就会停下来。页面效果如下：

目标效果

完成 style.css 中的 TODO 部分，完成后让动画无限循环起来，效果如下:

图片素材来源于网络，版权归原作者所有

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。
满足需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动检测。

判分标准

本题完全实现题目目标得满分，否则得 0 分。

通关代码✔️

/*style.css*/
body {
    background: url(../images/background.webp) no-repeat;
    background-size: cover;
    overflow-y: hidden;
}
.playground {
    width: 800px;
    margin: 400px auto;
    overflow: hidden; 
}
.actor { 
    float: left;
}
.actor:first-child {
    width: 200px;
    height: 180px;
    background: url(../images/west_01.png) no-repeat;
    /* TODO 填空 */
    animation: a1 0.8s steps(8) infinite;
}
.actor:nth-child(2) {
    width: 200px;
    height: 180px;
    background: url(../images/west_02.png) no-repeat;
    /* TODO 填空 */
    animation: a2 0.8s steps(8) infinite;
}
.actor:nth-child(3) {
    width: 170px;
    height: 240px;
    background: url(../images/west_03.png) no-repeat;
    /* TODO 填空 */
    animation: a3 0.8s steps(8) infinite; 
}
.actor:last-child {
    width: 210px;
    height: 200px;
    background: url(../images/west_04.png) no-repeat;
    /* TODO 填空 */
    animation: a4 0.8s steps(8) infinite;
}
@keyframes a1{
    from{
        background-position-x: 0;
    }
    to{
        background-position-x: -1600px;
    }
}
@keyframes a2{
    from{
        background-position-x: 0;
    }
    to{
        background-position-x: -1600px;
    }
}
@keyframes a3{
    from{
        background-position-x: 0;
    }
    to{
        background-position-x: -1360px;
    }
}
@keyframes a4{
    from{
        background-position-x: 0;
    }
    to{
        background-position-x: -1680px;
    }
}

代码解析📑

一、HTML 部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>西游记之西天取经</title>
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <div class="playground">
            <div class="actor"></div>
            <div class="actor"></div>
            <div class="actor"></div>
            <div class="actor"></div>
        </div>
    </body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5，告知浏览器按照 HTML5 的标准来解析和渲染页面。
<html>：HTML 文档的根标签，所有的 HTML 内容都包含在这个标签内。
<head>：包含了文档的元数据，如字符编码、页面标题以及外部样式表的链接。
- <meta charset="utf-8">：设置页面的字符编码为 UTF - 8，确保页面能够正确显示各种语言的字符。
- <title>西游记之西天取经</title>：设置浏览器窗口的标题为 “西游记之西天取经”。
- <link rel="stylesheet" href="./css/style.css">：将外部的 CSS 样式表 style.css 链接到当前 HTML 文档中，使得页面能够应用该样式表中的样式规则。
<body>：包含了页面的可见内容。
- <div class="playground">：一个具有 playground 类的 div 元素，作为一个容器，用于包裹内部的 .actor 元素。
- <div class="actor"></div>：四个具有 actor 类的 div 元素，它们将作为动画的载体，每个元素将显示不同的精灵图动画。

二、CSS 部分

1. body 样式

body {
    background: url(../images/background.webp) no-repeat;
    background-size: cover;
    overflow-y: hidden;
}

background: url(../images/background.webp) no-repeat;：设置页面的背景图片为 images 文件夹下的 background.webp，并且图片不重复显示。
background-size: cover;：让背景图片覆盖整个 body 元素，可能会裁剪部分图片以适应元素大小。
overflow-y: hidden;：隐藏垂直方向的滚动条，防止页面出现垂直滚动。

2. .playground 样式

.playground {
    width: 800px;
    margin: 400px auto;
    overflow: hidden; 
}

width: 800px;：设置 .playground 元素的宽度为 800 像素。
margin: 400px auto;：设置上下外边距为 400 像素，左右外边距自动计算，使元素在水平方向上居中显示。
overflow: hidden;：隐藏溢出 .playground 元素边界的内容，防止子元素溢出影响布局。

3. .actor 样式

.actor { 
    float: left;
}

float: left;：将 .actor 元素向左浮动，使四个 .actor 元素能够在一行内并排显示。

4. .actor 子元素样式及动画设置

.actor:first-child {
    width: 200px;
    height: 180px;
    background: url(../images/west_01.png) no-repeat;
    animation: a1 0.8s steps(8) infinite;
}
.actor:nth-child(2) {
    width: 200px;
    height: 180px;
    background: url(../images/west_02.png) no-repeat;
    animation: a2 0.8s steps(8) infinite;
}
.actor:nth-child(3) {
    width: 170px;
    height: 240px;
    background: url(../images/west_03.png) no-repeat;
    animation: a3 0.8s steps(8) infinite; 
}
.actor:last-child {
    width: 210px;
    height: 200px;
    background: url(../images/west_04.png) no-repeat;
    animation: a4 0.8s steps(8) infinite;
}

为每个 .actor 元素设置不同的宽度、高度和背景图片，背景图片分别为 west_01.png、west_02.png、west_03.png 和 west_04.png。
animation 属性用于定义动画效果：
- a1、a2、a3、a4 是动画的名称，分别对应下面定义的 @keyframes 规则。
- 0.8s 表示动画的持续时间为 0.8 秒。
- steps(8) 表示动画将分成 8 个步骤来播放，这是实现精灵图动画的关键，因为精灵图通常是将多个帧排列在一张图片上，通过这种方式可以逐帧显示图片。
- infinite 表示动画将无限循环播放。

5. @keyframes 动画规则

@keyframes a1{
    from{
        background-position-x: 0;
    }
    to{
        background-position-x: -1600px;
    }
}
@keyframes a2{
    from{
        background-position-x: 0;
    }
    to{
        background-position-x: -1600px;
    }
}
@keyframes a3{
    from{
        background-position-x: 0;
    }
    to{
        background-position-x: -1360px;
    }
}
@keyframes a4{
    from{
        background-position-x: 0;
    }
    to{
        background-position-x: -1680px;
    }
}

@keyframes 用于定义动画的关键帧。
from 表示动画的起始状态，将背景图片的水平位置设置为 0，即显示精灵图的第一帧。
to 表示动画的结束状态，通过将背景图片的水平位置设置为一个负值，使得浏览器从右往左逐渐显示精灵图中的不同帧。例如，对于第一个 .actor 元素，宽度为 200 像素，共 8 帧，所以 200×8 = 1600 像素，将背景位置从 0 移动到 -1600 像素，就可以依次显示精灵图的 8 帧，从而实现动画效果。