西游记之西天取经

介绍

师徒四人一行向西天拜佛求经，不料中途被妖怪施了法术动弹不得！俗话说救人一命胜造七级浮屠！情急之下小蓝挺身而出，灵机一动，用 css 行善施救，让师徒西行而去，从而普渡众生，善哉，善哉！

准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

1
2
3
4
5
6
7
├── images 
│   ├── background.webp
│   ├── west_01.png
│   ├── west_02.png
│   ├── west_03.png 
│   └── west_04.png
└── index.html

其中：

  • index.html 是主页面。
  • images 是图片文件夹。

注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。

1
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 页面初始化后动画只动一次就会停下来。页面效果如下：

初始效果

目标

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

完成效果

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

规定

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

判分标准

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

总通过次数: 2417 | 总提交次数: 2468 | 通过率: 97.9%

难度: 简单 标签: 2022, 省模拟赛, Web 前端, HTML5, CSS3

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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 infinite steps(8);
    
}
.actor:nth-child(2) {
    width: 200px;
    height: 180px;
    background: url(../images/west_02.png) no-repeat;
    /* TODO 填空 */
    animation: a2 0.8s infinite steps(8);
}
.actor:nth-child(3) {
    width: 170px;
    height: 240px;
    background: url(../images/west_03.png) no-repeat;
    /* TODO 填空 */
    animation: a3 0.8s infinite steps(8); 
}
.actor:last-child {
    width: 210px;
    height: 200px;
    background: url(../images/west_04.png) no-repeat;
    /* TODO 填空 */
    animation: a4 0.8s infinite steps(8);
}
@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;
    }
}