JavaScript与CSS实现可点击气泡的动态重现效果

聖光之護

发布时间：2025-11-01 10:17:20

863人浏览过

来源于php中文网

原创

JavaScript与CSS实现可点击气泡的动态重现效果

本教程详细介绍了如何使用javascript和css创建一个交互式气泡效果。用户点击气泡后，气泡会暂时消失，并在指定时间后自动重新出现。文章通过优化原始的重复代码，展示了如何利用一个通用的javascript函数结合`settimeout`机制，实现高效且可维护的气泡消失与重现逻辑，并提供了完整的代码示例和最佳实践建议。

引言：动态气泡效果的实现与优化

在网页设计中，动态的视觉效果能够显著提升用户体验。气泡动画作为一种常见的背景或交互元素，常用于营造轻松活泼的氛围。本教程将指导您如何创建一个可点击的动态气泡，使其在被点击后“破裂”（消失），并在短暂延迟后“重生”（重新出现），从而形成一个持续的交互循环。我们将重点关注如何优化JavaScript代码，避免重复，并引入定时重现的机制。

原始实现分析及优化需求

最初的实现可能为每个气泡编写一个独立的JavaScript函数，例如 changeStyle1(), changeStyle2() 等，这些函数都执行相同的操作：将特定气泡的 opacity 样式设置为 0，使其消失。这种方法存在两个主要问题：

代码冗余：为每个气泡创建单独的函数导致大量的重复代码，难以维护和扩展。
功能缺失：气泡消失后无法自动重现，不符合“气泡破裂后重生”的动态效果需求。

为了解决这些问题，我们需要一个更通用、更灵活的解决方案，即使用一个函数处理所有气泡的点击事件，并引入定时器使其重现。

优化方案：单一函数与定时重现

核心优化在于创建一个通用的JavaScript函数，该函数能够接收被点击气泡的ID作为参数，并执行两步操作：首先使其消失，然后通过setTimeout函数在一定延迟后使其重新出现。

立即学习“Java免费学习笔记（深入）”；

MusicAI

AI音乐生成工具

下载

JavaScript 代码实现

/**
 * 处理气泡点击事件，使其消失并在指定时间后重现。
 * @param {string} id - 被点击气泡的HTML元素ID。
 */
const changeStyleToBubble = (id) => {
  // 1. 获取目标元素
  const element = document.getElementById(id);

  // 2. 使元素立即消失 (设置不透明度为0)
  element.style.opacity = "0";

  // 3. 设置定时器，在2秒后使元素重新出现 (设置不透明度为1)
  setTimeout(() => {
    element.style.opacity = "1";
  }, 2000); // 2000毫秒 = 2秒
};

代码解析

changeStyleToBubble(id)：这是一个箭头函数，接收一个参数 id，代表被点击气泡的HTML ID。
document.getElementById(id)：通过传入的 id 获取对应的DOM元素。
element.style.opacity = "0"：将获取到的元素的CSS opacity 属性设置为 0，使其在视觉上立即消失。
setTimeout(() => { element.style.opacity = "1"; }, 2000)：这是实现气泡重现的关键。
- setTimeout 是一个异步函数，它会在指定的延迟时间（第二个参数，单位毫秒）之后执行其第一个参数（一个函数或代码字符串）。
- 在这里，我们设置了一个匿名函数，该函数将 element.style.opacity 设置回 1，使气泡重新可见。
- 2000 毫秒意味着气泡将在消失2秒后重新出现。您可以根据需要调整这个时间。

HTML 结构调整

为了让优化后的JavaScript函数能够正确工作，我们需要修改HTML中气泡的 onclick 事件处理器。不再调用特定的 changeStyleX() 函数，而是调用通用的 changeStyleToBubble() 并传入当前元素的ID。

<button id="pop1" onclick="changeStyleToBubble(this.id)" class="bubble x1">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</button>
<button id="pop2" onclick="changeStyleToBubble(this.id)" class="bubble x2">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</button>
<!-- ... 其他气泡元素以此类推 ... -->

HTML 代码解析

onclick="changeStyleToBubble(this.id)"：当按钮被点击时，会调用 changeStyleToBubble 函数。this.id 是一个非常方便的用法，它会自动将当前被点击元素的 id 属性值作为参数传递给函数。这样，无论哪个气泡被点击，changeStyleToBubble 函数都能知道是哪个元素触发了事件。

完整的代码示例

为了提供一个可运行的示例，我们将结合HTML、CSS和JavaScript。CSS部分负责气泡的视觉样式和动画，JavaScript负责交互逻辑。

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="style.css">
</head>
<body>
  <div id="background-wrap">
    <button id="pop1" onclick="changeStyleToBubble(this.id)" class="bubble x1">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
    <button id="pop2" onclick="changeStyleToBubble(this.id)" class="bubble x2">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
    <button id="pop3" onclick="changeStyleToBubble(this.id)" class="bubble x3">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
    <button id="pop4" onclick="changeStyleToBubble(this.id)" class="bubble x4">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
    <button id="pop5" onclick="changeStyleToBubble(this.id)" class="bubble x5">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
    <button id="pop6" onclick="changeStyleToBubble(this.id)" class="bubble x6">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
    <button id="pop7" onclick="changeStyleToBubble(this.id)" class="bubble x7">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
    <button id="pop8" onclick="changeStyleToBubble(this.id)" class="bubble x8">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
    <button id="pop9" onclick="changeStyleToBubble(this.id)" class="bubble x9">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
    <button id="pop10" onclick="changeStyleToBubble(this.id)" class="bubble x10">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
    <button id="pop11" onclick="changeStyleToBubble(this.id)" class="bubble x11">
      <span></span><span></span><span></span><span></span><span></span>
    </button>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS (style.css)

body {
  background: #000;
  color: #333;
  font: 100% Lato, Arial, Sans Serif;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

button {
  background: transparent;
  border-color: transparent;
  cursor: pointer; /* 添加光标指示，表明是可点击元素 */
  padding: 0; /* 移除默认内边距 */
}

.bubble {
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.25);
  transition: opacity 0.3s ease-in-out; /* 添加过渡效果，使消失和出现更平滑 */
}

.bubble:after {
  content: '';
  position: absolute;
  top: 80px;
  left: 80px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  z-index: 10;
  filter: blur(2px);
}

.bubble::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 45px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  z-index: 10;
  filter: blur(2px);
}

.bubble span {
  position: absolute;
  border-radius: 50%;
}

.bubble span:nth-child(1) {
  inset: 10px;
  border-left: 15px solid #0fb4ff;
  filter: blur(8px);
}

.bubble span:nth-child(2) {
  inset: 10px;
  border-right: 15px solid #ff4484;
  filter: blur(8px);
}

.bubble span:nth-child(3) {
  inset: 20px;
  border-top: 15px solid #ffeb3b;
  filter: blur(8px);
}

.bubble span:nth-child(4) {
  inset: 30px;
  border-left: 15px solid #ff4484;
  filter: blur(12px);
}

.bubble span:nth-child(5) {
  inset: 10px;
  border-bottom: 10px solid #fff;
  filter: blur(8px);
  transform: rotate(330deg);
}

/* 气泡动画 */
.x1 {
  animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: -5%;
  top: 5%;
  transform: scale(0.6);
}

.x2 {
  animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 5%;
  top: 80%;
  transform: scale(0.4);
}

.x3 {
  animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 10%;
  top: 40%;
  transform: scale(0.7);
}

.x4 {
  animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 20%;
  top: 0;
  transform: scale(0.3);
}

.x5 {
  animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 30%;
  top: 50%;
  transform: scale(0.5);
}

.x6 {
  animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 50%;
  top: 0;
  transform: scale(0.8);
}

.x7 {
  animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 65%;
  top: 70%;
  transform: scale(0.4);
}

.x8 {
  animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 80%;
  top: 10%;
  transform: scale(0.3);
}

.x9 {
  animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
  left: 90%;
  top: 50%;
  transform: scale(0.6);
}

.x10 {
  animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
  left: 80%;
  top: 80%;
  transform: scale(0.3);
}

.x11 {
  animation: animateBubble 19s linear infinite, sideWays 3s ease-in-out infinite alternate;
  left: 90%;
  top: 90%;
  transform: scale(0.7);
}

/* 关键帧动画 */
@keyframes animateBubble {
  0% { margin-top: 1000px; }
  100% { margin-top: -100%; }
}

@keyframes sideWays {
  0% { margin-left: 0px; }
  100% { margin-left: 50px; }
}

JavaScript (script.js)

/**
 * 处理气泡点击事件，使其消失并在指定时间后重现。
 * @param {string} id - 被点击气泡的HTML元素ID。
 */
const changeStyleToBubble = (id) => {
  const element = document.getElementById(id);
  element.style.opacity = "0"; // 气泡消失

  // 2秒后气泡重现
  setTimeout(() => {
    element.style.opacity = "1";
  }, 2000);
};

核心概念与最佳实践

DRY (Don't Repeat Yourself) 原则：通过创建一个通用函数，我们避免了为每个气泡编写重复的JavaScript代码，大大提高了代码的可维护性和可读性。
事件处理与 this.id：onclick="changeStyleToBubble(this.id)" 是一种简洁高效的事件处理方式，它允许我们直接将触发事件的元素的ID传递给处理函数，实现动态和灵活的交互。
异步操作 setTimeout：setTimeout 是JavaScript中处理时间延迟任务的常用方法。它允许我们在不阻塞主线程的情况下，在未来某个时刻执行特定代码，这对于实现动画、延迟效果等非常有用。
CSS transition 属性：在 .bubble 样式中添加 transition: opacity 0.3s ease-in-out; 可以使气泡的消失和重现过程更加平滑，而不是生硬地切换，从而提升视觉体验。
语义化HTML：尽管这里使用了 <button> 元素来承载气泡，但如果气泡仅用于视觉效果而非实际的表单提交或导航，考虑使用 <div> 配合适当的ARIA属性来增强可访问性。如果它确实是一个可点击的交互元素，<button> 是合适的选择。

总结

通过本教程，我们学习了如何利用JavaScript的 setTimeout 函数和简洁的HTML事件处理机制，实现一个动态且交互性强的气泡效果。这种方法不仅解决了代码冗余问题，还为气泡增添了“破裂与重生”的生命周期，使网页内容更具吸引力。掌握这种模式，您可以将其应用于各种需要定时交互和动态视觉效果的场景中。

html怎么插入视频_网页中添加视频文件代码【嵌入】

HTML文本格式化怎么实现_HTML文本格式化标签操作【教程】

如何在 CSS Grid 的指定网格项中嵌入并居中滑块控件

如何在 CSS Grid 的指定区域（如 item-1）中嵌入并居中滑块控件

如何正确分离页脚与主体内容：解决浮动导致的布局塌陷问题