从黑夜中绽放的火花：CSS实现神奇的星星粒子动画

2022-11-20 08:47:40

打造一个引人注目的星星粒子动画

在网页设计中，动画元素可以瞬间提升视觉吸引力，赋予你的网站生机和活力。本文将深入探讨如何使用 HTML、CSS 和 JavaScript 创造一个美丽的星星粒子动画效果。

1. HTML 结构

首先，我们从构建一个 HTML 容器开始，作为动画元素的容身之处：

<div class="stars"></div>

2. CSS 样式

接下来，让我们为星星和粒子添加 CSS 样式：

/* 定义星星的样式 */
.star {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ffffff;
  animation: twinkle 3s infinite alternate;
}

/* 定义星星闪烁的动画 */
@keyframes twinkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

/* 定义粒子的样式 */
.particle {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background-color: #ffffff;
  animation: float 2s infinite alternate;
}

/* 定义粒子漂浮的动画 */
@keyframes float {
  0% {
    top: 0;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 0;
  }
}

这个 CSS 代码将为星星定义一个闪烁动画，而粒子则漂浮在容器中。

3. 粒子效果

为了进一步增强动画效果，我们可以添加粒子效果：

/* 定义粒子的样式 */
.particle {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background-color: #ffffff;
  animation: float 2s infinite alternate;
}

/* 定义粒子漂浮的动画 */
@keyframes float {
  0% {
    top: 0;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 0;
  }
}

4. 动画启动

最后，我们使用 JavaScript 启动动画：

// 获取星星容器元素
const starsContainer = document.querySelector(".stars");

// 创建并添加星星元素
for (let i = 0; i < 100; i++) {
  const star = document.createElement("div");
  star.classList.add("star");
  starsContainer.appendChild(star);
}

// 创建并添加粒子元素
for (let i = 0; i < 50; i++) {
  const particle = document.createElement("div");
  particle.classList.add("particle");
  starsContainer.appendChild(particle);
}