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

实现图标逐个延迟显现的动画效果

碧海醫心

发布： 2025-07-19 16:26:21

原创

458人浏览过

实现图标逐个延迟显现的动画效果

本文将介绍如何使用JavaScript和CSS实现图标容器中图标逐个延迟显现的动画效果。通过JavaScript获取容器内的图标元素，并使用setTimeout函数为每个图标添加带有过渡效果的CSS类，从而实现图标的逐个延迟显现。这种方法简单易懂，能够为网页增加动态效果。

准备工作

首先，我们需要一个包含图标的HTML结构。确保每个图标都位于一个容器内，例如div，并且该容器具有一个唯一的ID，方便JavaScript操作。例如：

<div id="iconContainer" class="container">
  <img src="image1.png" alt="Icon 1">
  <img src="image2.png" alt="Icon 2">
  <img src="image3.png" alt="Icon 3">
  <img src="image4.png" alt="Icon 4">
  <img src="image5.png" alt="Icon 5">
</div>

登录后复制

同时，我们需要定义容器的CSS样式，例如：

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

.container > img {
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 40px;
}

登录后复制

使用JavaScript实现延迟显现

接下来，使用JavaScript获取图标容器，并遍历其子元素（即图标）。为每个图标设置一个延迟时间，然后使用setTimeout函数在延迟时间后为图标添加一个CSS类，该CSS类定义了图标显现的过渡效果。

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

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

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

登录后复制

定义CSS过渡效果

为了实现图标的渐显效果，我们需要在CSS中定义.show类的样式。我们首先设置图标的初始透明度为0，然后通过transition属性定义过渡效果。

火龙果写作

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

106

查看详情

.container > img {
  opacity: 0;
  transition: opacity 1s ease-in-out; /* 定义过渡效果 */
}

.show {
  opacity: 1; /* 设置图标完全显示 */
}

登录后复制

在上面的代码中，opacity: 0设置图标初始透明度为0，transition: opacity 1s ease-in-out定义了透明度变化的过渡效果，1s表示过渡时间为1秒，ease-in-out表示过渡效果为缓入缓出。

完整代码示例

将上述代码整合在一起，得到完整的代码示例：

<!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;
    }

    .show {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div id="iconContainer" class="container">
    <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 iconContainer = document.getElementById("iconContainer");
    const icons = iconContainer.children;
    const delay = 500;

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

    window.onload = animateIcons;
  </script>
</body>
</html>

登录后复制