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

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

心靈之曲

发布： 2025-07-19 16:10:12

原创

1032人浏览过

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

本文将介绍如何使用 CSS 和 JavaScript 实现图标容器中图标的依次延迟显示动画效果。通过 JavaScript 获取图标元素，并利用 setTimeout 函数和 CSS 过渡效果，为每个图标添加延迟显示的动画，从而提升用户体验。本文提供了详细的代码示例和步骤说明，帮助开发者轻松实现这一效果。

核心思路

实现图标依次延迟显示的核心在于：

获取所有图标元素： 使用 JavaScript 获取包含图标的容器元素，并获取其子元素（即图标）。
设置延迟时间： 定义一个延迟时间，用于控制每个图标显示的间隔。
循环添加类名： 遍历所有图标元素，使用 setTimeout 函数为每个图标设置一个延迟时间，并在延迟时间结束后，为该图标添加一个特定的 CSS 类名。
CSS过渡效果： 使用 CSS 定义该类名的样式，并设置过渡效果，使得图标在添加该类名时呈现逐渐显示的效果。

具体实现步骤

1. HTML 结构：

首先，确保你的 HTML 结构包含一个容器元素，其中包含多个图标元素。为容器元素添加一个唯一的 id，以便在 JavaScript 中访问它。

<div class="container" id="iconContainer">
  <img src="image1.png" alt="Icon 1">
  <img src="image2.png" alt="Icon 2">
  <img src="image3.png" alt="Icon 3">
  <!-- 更多图标 -->
</div>

登录后复制

2. CSS 样式：

接下来，在 CSS 中定义图标的初始状态和过渡效果。关键是设置 opacity: 0 使图标初始时不可见，并使用 transition 属性定义过渡效果。

依图语音开放平台

查看详情

.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 ease-in-out; /* 定义过渡效果 */
}

.visible {
  opacity: 1; /* 显示图标 */
}

登录后复制

3. JavaScript 代码：

使用 JavaScript 获取容器元素和图标元素，并使用 setTimeout 函数为每个图标添加 visible 类名，实现延迟显示效果。

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

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

// 在页面加载完成后执行
window.onload = showIcons;

登录后复制

代码解释：

document.getElementById("iconContainer"): 获取 id 为 "iconContainer" 的容器元素。
container.children: 获取容器元素的所有子元素（即图标元素）。
delay: 定义延迟时间，单位为毫秒。可以根据需要调整该值。
showIcons(): 遍历所有图标元素，使用 setTimeout 函数为每个图标设置一个延迟时间，并在延迟时间结束后，为该图标添加 visible 类名。
window.onload = showIcons: 确保在页面加载完成后执行 showIcons 函数。

完整示例

将以上 HTML、CSS 和 JavaScript 代码组合在一起，即可实现图标依次延迟显示的效果。

<!DOCTYPE html>
<html>
<head>
  <title>图标依次延迟显示</title>
  <style>
    .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 ease-in-out; /* 定义过渡效果 */
    }

    .visible {
      opacity: 1; /* 显示图标 */
    }
  </style>
</head>
<body>
  <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" alt="Icon 1">
    <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" alt="Icon 2">
    <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" alt="Icon 3">
    <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" alt="Icon 4">
    <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" alt="Icon 5">
  </div>

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

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

    // 在页面加载完成后执行
    window.onload = showIcons;
  </script>
</body>
</html>

登录后复制