使用 JavaScript setTimeout 和 CSS 过渡创建令人惊叹的渐变 Div Reveals

wufei123 2025-01-26 阅读:1 评论:0

巧妙运用javascript和css过渡，打造流畅网页用户体验！本文将演示如何利用javascript的settimeout函数结合css过渡，实现网页元素的渐进式显示效果。概述我们将逐步展现一系列div元素。setTimeout函数控...

巧妙运用javascript和css过渡，打造流畅网页用户体验！本文将演示如何利用javascript的settimeout函数结合css过渡，实现网页元素的渐进式显示效果。

概述

我们将逐步展现一系列div元素。setTimeout函数控制每个元素的出现时间，CSS过渡则负责视觉效果。

HTML结构

首先，构建HTML结构。这是一个包含多个div元素的简单布局，每个div包含图像和链接：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>gradual div reveal</title>
  <link rel="stylesheet" href="src/style.css">
</head>
<body>
  <div class="toggle-div">
    @@##@@
    <a href="">perplexity.com</a>
  </div>
  <div class="toggle-div">
    @@##@@
    <a href="">meta.ai</a>
  </div>
  <div class="toggle-div">
    @@##@@
    <a href="">copilot.microsoft.com</a>
  </div>
  <div class="toggle-div">
    @@##@@
    <a href="">chat.deepseek.com</a>
  </div>
  <div class="toggle-div">
    @@##@@
    <a href="">gemini.google.com</a>
  </div>
  <script src="src/script.js"></script>
</body>
</html>

CSS过渡

接下来，定义CSS样式，控制div元素的外观和过渡效果：

.toggle-div {
  opacity: 0; /* 初始隐藏 */
  transition: opacity 1s ease; /* 过渡效果 */
  height: 50px; /* 设置高度以确保可见 */
  background-color: lightblue; /* 背景颜色 */
  margin: 10px 0; /* div间距 */
  padding: 12px 80px;
  display: flex;
  align-items: center;
}

.toggle-div img {
  height: 100%;
  margin-right: 8px;
}

.toggle-div a {
  font-size: 20px;
}

CSS解释

opacity: 初始值为0，使div不可见。
transition: 不透明度属性将在1秒内平滑过渡。
其他样式: 设置基本样式，确保div可见并具有良好布局。

JavaScript逐步显示

最后，编写JavaScript代码控制每个div的显示时机：

// JavaScript to reveal divs
const divs = document.querySelectorAll('.toggle-div');

divs.forEach((div, index) => {
  setTimeout(() => {
    div.style.opacity = 1; // 设置不透明度为1，使其可见
  }, index * 500); // 每个div延迟半秒，延迟时间随索引递增
});

JavaScript解释