当前位置：首页 > 文章列表 > 文章 > 前端 > CSS动画与JS控制圆点渐进效果

CSS动画与JS控制圆点渐进效果

2026-04-21 09:52:37 0浏览收藏

✅ 推荐实现方案（含完整代码）

HTML（保持简洁，10 个占位元素）

CSS（关键：分离动画声明）

body {
  background-color: #000;
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden; /* 防止滚动条干扰 */
  position: relative; /* 确保绝对定位子元素基于视口 */
}

.circle {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.1); /* 初始极小尺寸 */
  /* ❌ 不在此处声明 animation —— 避免首次后无法重播 */
}

.anim {
  animation: scale 1s ease-out forwards; /* forwards 保证结束态保留 */
}

@keyframes scale {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3);
  }
}

JavaScript（精准时序 + 动画重置）

function startCircleSequence() {
  const circles = document.querySelectorAll('.circle');
  const width = window.innerWidth;
  const height = window.innerHeight;

  // 单个圆点初始化与动画触发函数
  const initAndAnimate = (circle, index) => {
    // 1. 清除旧动画类（确保下次能重播）
    circle.classList.remove('anim');

    // 2. 随机生成位置、尺寸、颜色
    const x = Math.floor(Math.random() * width);
    const y = Math.floor(Math.random() * height);
    const size = Math.floor((Math.random() * 6) + 5) * 10;
    const r = Math.floor(Math.random() * 255).toString(16).padStart(2, '0');
    const g = Math.floor(Math.random() * 255).toString(16).padStart(2, '0');
    const b = Math.floor(Math.random() * 255).toString(16).padStart(2, '0');

    // 3. 设置静态样式（位置/大小/颜色）
    circle.style.left = `${x}px`;
    circle.style.top = `${y}px`;
    circle.style.width = `${size}px`;
    circle.style.height = `${size}px`;
    circle.style.backgroundColor = `#${r}${g}${b}`;

    // 4. 异步添加动画类（关键！否则样式同步更新会导致动画被跳过）
    setTimeout(() => circle.classList.add('anim'), 0);
  };

  // 5. 为每个圆点绑定 animationend 事件，实现自动循环
  circles.forEach((circle, i) => {
    circle.addEventListener('animationend', () => initAndAnimate(circle, i));
    // 按 100ms 间隔启动首个动画
    setTimeout(() => initAndAnimate(circle, i), i * 100);
  });
}

// 启动序列（页面加载后执行）
document.addEventListener('DOMContentLoaded', startCircleSequence);

⚠️ 关键注意事项

setTimeout(..., 0) 不可省略：它将 .anim 类的添加推入下一个宏任务，使浏览器有机会先应用 left/top/width/height 样式，再触发动画，否则 CSS 动画可能因“无变化”而静默失败。
.padStart(2, '0') 必须添加：防止 Math.random() 生成 0 或 1 时 toString(16) 输出 "0" 或 "1"（而非 "00" 或 "01"），导致颜色错误（如 #f0 → #f00000）。
animation: ... forwards 是必需的：确保动画结束后 opacity: 0 和 scale(3) 状态被保留，避免圆点突然“闪回”初始状态。
overflow: hidden 与 position: relative 配合：防止大尺寸圆点（scale(3)）溢出视口造成滚动条或布局抖动。

✅ 总结

本方案摒弃了“手动 setTimeout 控制所有环节”的脆弱模式，转而利用浏览器原生的 animationend 事件构建闭环反馈链：每个圆点动画结束 → 触发下一次初始化 → 再次播放动画。配合类名动态切换与异步样式更新，既保证了 100ms 精确间隔，又实现了真正的无限循环与视觉一致性。适用于粒子效果、加载指示器、交互反馈等需要高可控性 CSS 动画的场景。

本篇关于《CSS动画与JS控制圆点渐进效果》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！