实现图标依次延迟显现的动画效果-js教程-PHP中文网

实现图标依次延迟显现的动画效果

花韻仙語

发布： 2025-07-19 16:06:01

原创

717人浏览过

实现图标依次延迟显现的动画效果

本文将介绍如何使用 JavaScript 和 CSS 实现图标容器中图标依次延迟显现的动画效果。通过 JavaScript 获取容器内的图标元素，并利用 setTimeout 函数为每个图标添加 CSS 类，从而触发 CSS 过渡效果，最终达到图标逐个显现的视觉效果。

实现原理

核心思路是利用 JavaScript 控制 CSS 类的添加时机，结合 CSS 的 transition 属性，实现动画效果。具体步骤如下：

获取图标元素： 使用 JavaScript 获取包含所有图标的容器元素，并获取其子元素（即图标元素）。
设置延迟时间： 定义一个延迟时间，用于控制每个图标显现的间隔。
循环处理图标： 遍历所有图标元素，使用 setTimeout 函数为每个图标设置一个延迟执行的函数。
添加 CSS 类： 在延迟执行的函数中，为当前图标元素添加一个特定的 CSS 类，该类定义了图标显现后的样式。
CSS 过渡效果： 在 CSS 中，为图标元素定义初始状态和过渡效果，当添加 CSS 类时，会触发过渡效果，从而实现图标的显现动画。

代码实现

HTML 结构：

首先，需要为包含图标的容器元素添加一个唯一的 ID，方便 JavaScript 获取。

<div class="container" id="iconContainer">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/1024px-Google_Chrome_icon_%28February_2022%29.svg.png">
</div>

登录后复制

CSS 样式：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

.container {
  display: flex;
  gap: 8px;
  flex-flow: row wrap;
}

.container > img {
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 40px;
  opacity: 0; /* 初始状态：隐藏 */
  transition: opacity 1s; /* 过渡效果：透明度变化，持续 1 秒 */
}

.show {
  opacity: 1; /* 显现后的状态：完全不透明 */
}

登录后复制

JavaScript 代码：

const container = document.getElementById("iconContainer");
const icons = container.children;
const delay = 500; // 延迟时间，单位：毫秒

window.onload = () => {
    for (let i = 0; i < icons.length; i++) {
        setTimeout(() => {
            icons[i].classList.add("show");
        }, i * delay);
    }
};

登录后复制

代码解释：

document.getElementById("iconContainer"): 获取 ID 为 "iconContainer" 的容器元素。
container.children: 获取容器元素的所有子元素（即图标元素）。
delay = 500: 设置延迟时间为 500 毫秒。
window.onload = () => { ... }: 确保页面加载完成后再执行 JavaScript 代码。
for (let i = 0; i < icons.length; i++) { ... }: 循环遍历所有图标元素。
setTimeout(() => { ... }, i * delay): 使用 setTimeout 函数设置延迟执行的函数。每个图标的延迟时间为 i * delay，确保图标依次显现。
icons[i].classList.add("show"): 在延迟执行的函数中，为当前图标元素添加 "show" 类，触发 CSS 过渡效果。