CSS 动画工坊：制作加载进度条变贪吃蛇（无限循环）-CSDN博客

本文链接：https://blog.csdn.net/2301_76277481/article/details/147674943

在网页交互设计领域，如何让加载过程摆脱枯燥，成为吸引用户注意力的亮点，是众多开发者探索的方向。本文将带您走进 CSS 动画工坊，用代码实现加载进度条变身无限循环贪吃蛇的奇妙效果，让静态的加载提示化作灵动的视觉盛宴。

一、技术原理剖析

实现加载进度条变贪吃蛇的无限循环效果，核心在于巧妙运用 CSS 的动画属性和层级布局。通过@keyframes规则定义动画关键帧，控制贪吃蛇头部与身体元素的位置变化；利用animation属性设置动画的时长、速度曲线、循环次数等参数；再结合合理的层级与定位，使元素在进度条容器内有序移动，最终达成无限循环的动态视觉呈现。

二、开发准备工作

在开始编码前，确保您对 CSS 的基础属性（如position、width、height、border-radius等）以及动画相关属性（@keyframes、animation）有一定了解。同时，选择一款顺手的代码编辑器，如 Visual Studio Code、Sublime Text 等，它们丰富的插件和便捷的调试功能，能大幅提升开发效率。

三、代码实现详解

3.1 HTML 结构搭建

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载进度条变贪吃蛇</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="loading-container">
        <div class="snake-head"></div>
        <div class="snake-body"></div>
        <div class="snake-body"></div>
        <div class="snake-body"></div>
        <div class="snake-body"></div>
    </div>
</body>

</html>

上述代码构建了最基础的页面结构。外层的.loading-container作为加载进度条的容器，其内部包含一个表示贪吃蛇头部的.snake-head元素，以及四个表示贪吃蛇身体的.snake-body元素。这些元素后续将通过 CSS 样式与动画赋予生命，在容器内穿梭移动。

3.2 CSS 样式与动画实现

/* 全局样式重置与页面布局 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

/* 加载进度条容器样式 */
.loading-container {
    width: 400px;
    height: 30px;
    background-color: #eaeaea;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

/* 贪吃蛇头部样式与动画 */
.snake-head {
    width: 30px;
    height: 30px;
    background-color: #ff5733;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: -30px;
    animation: moveSnake 4s infinite linear;
    z-index: 2;
}

/* 贪吃蛇身体样式与动画延迟 */
.snake-body {
    width: 30px;
    height: 30px;
    background-color: #ff8040;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: -30px;
    z-index: 2;
}

.snake-body:nth-child(2) {
    animation: moveSnake 4s infinite linear 0.2s;
}

.snake-body:nth-child(3) {
    animation: moveSnake 4s infinite linear 0.4s;
}

.snake-body:nth-child(4) {
    animation: moveSnake 4s infinite linear 0.6s;
}

.snake-body:nth-child(5) {
    animation: moveSnake 4s infinite linear 0.8s;
}

/* 定义贪吃蛇移动动画 */
@keyframes moveSnake {
    0% {
        left: -30px;
    }
    100% {
        left: 400px;
    }
}

全局样式与页面布局：
- *选择器进行全局样式重置，消除浏览器默认的内外边距，并设置box-sizing: border-box，便于元素尺寸计算。
- body元素采用 Flex 布局，实现页面内容水平垂直居中，设置浅灰色背景和通用字体，营造简洁的视觉环境。
加载进度条容器样式：
- .loading-container设置宽度为 400px、高度为 30px，背景色为浅灰色，搭配 15px 的圆角，模拟进度条外观。
- 添加box-shadow属性，赋予容器轻微的立体阴影效果；overflow: hidden确保贪吃蛇元素移出容器范围时隐藏，维持画面整洁；position: relative和z-index: 1为内部元素定位提供基准和层级控制。
贪吃蛇头部样式与动画：
- .snake-head定义了贪吃蛇头部的尺寸、颜色和圆角，初始位置设置在容器左侧外部（left: -30px）。
- animation: moveSnake 4s infinite linear应用moveSnake动画，动画时长 4 秒，以线性速度无限循环播放，使头部从左侧进入容器并向右移动。
贪吃蛇身体样式与动画延迟：
- .snake-body设置身体部分的基础样式，与头部类似。
- 通过:nth-child选择器为每个身体元素设置不同的动画延迟，从 0.2 秒到 0.8 秒依次递增，使身体部分依次跟随头部移动，形成连贯的贪吃蛇行进效果。
贪吃蛇移动动画定义：
- @keyframes moveSnake规则定义了动画的关键帧，从初始位置left: -30px移动到left: 400px，即从容器左侧外移动到右侧外，实现一次完整的穿越过程。

四、完整代码展示

4.1 HTML 代码（index.html）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载进度条变贪吃蛇</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="loading-container">
        <div class="snake-head"></div>
        <div class="snake-body"></div>
        <div class="snake-body"></div>
        <div class="snake-body"></div>
        <div class="snake-body"></div>
    </div>
</body>

</html>

4.2 CSS 代码（styles.css）

/* 全局样式重置与页面布局 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

/* 加载进度条容器样式 */
.loading-container {
    width: 400px;
    height: 30px;
    background-color: #eaeaea;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

/* 贪吃蛇头部样式与动画 */
.snake-head {
    width: 30px;
    height: 30px;
    background-color: #ff5733;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: -30px;
    animation: moveSnake 4s infinite linear;
    z-index: 2;
}

/* 贪吃蛇身体样式与动画延迟 */
.snake-body {
    width: 30px;
    height: 30px;
    background-color: #ff8040;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: -30px;
    z-index: 2;
}

.snake-body:nth-child(2) {
    animation: moveSnake 4s infinite linear 0.2s;
}

.snake-body:nth-child(3) {
    animation: moveSnake 4s infinite linear 0.4s;
}

.snake-body:nth-child(4) {
    animation: moveSnake 4s infinite linear 0.6s;
}

.snake-body:nth-child(5) {
    animation: moveSnake 4s infinite linear 0.8s;
}

/* 定义贪吃蛇移动动画 */
@keyframes moveSnake {
    0% {
        left: -30px;
    }
    100% {
        left: 400px;
    }
}

五、效果优化与拓展方向

动画流畅度优化：可调整animation-timing-function属性，尝试ease-in-out等不同速度曲线，使贪吃蛇的移动更自然，避免线性运动带来的机械感。
增加元素细节：为贪吃蛇头部添加眼睛、嘴巴等元素，或给身体部分设置渐变颜色，增强视觉表现力。
响应式设计：通过媒体查询，让加载进度条与贪吃蛇在不同设备屏幕尺寸下保持良好的显示效果，提升用户体验。

将上述代码保存为相应文件，在浏览器中打开index.html，即可观赏到加载进度条变贪吃蛇的无限循环动画。希望这个案例能激发您在 CSS 动画领域更多的创意与探索！