CSS 快速实现烟花绽放（仅100多行代码）

这篇文章距离上次修改已过442天，其中的内容可能已经有所变动。

以下是实现烟花绽放效果的核心CSS代码，包括元素的创建、样式定义以及JavaScript中的动画控制。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  body {
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }
 
  .fireworks {
    position: absolute;
    --c: #fff;
    --size: 2px;
    --speed: 500ms;
    --duration: 10s;
    --delay: 0s;
    --easing: linear;
  }
 
  .fireworks-item {
    position: absolute;
    width: var(--size);
    height: var(--size);
    background: var(--c);
    animation: fly var(--speed) var(--easing) infinite;
    opacity: 0;
    r: 100;
  }
 
  @keyframes fly {
    0% {
      opacity: 0;
      r: 100;
    }
    100% {
      opacity: 1;
      r: 10;
    }
  }
</style>
</head>
<body>
<script>
  const fireworks = (c, n, size, speed, duration, delay) => {
    const fireworks = document.createElement('div');
    fireworks.className = 'fireworks';
    Object.assign(fireworks.style, {
      '--c': c,
      '--size': `${size}px`,
      '--speed': `${speed}ms`,
      '--duration': `${duration}ms`,
      '--delay': `${delay}ms`,
    });
    for (let i = 0; i < n; i++) {
      const fireworksItem = document.createElement('div');
      fireworksItem.className = 'fireworks-item';
      fireworks.appendChild(fireworksItem);
    }
    document.body.appendChild(fireworks);
  };
 
  fireworks('#FFF', 100, 2, 500, 10000, 0);
</script>
</body>
</html>

这段代码创建了一个名为 .fireworks 的元素，并给它添加了一百个 .fireworks-item 作为烟花的粒子。每个烟花粒子都是一个 div，通过CSS动画从全透明到完全可见，大小从2px变化到10px，并且在屏幕上随机移动。通过调整CSS变量，可以快速改变烟花的颜色、大小和数量等特性。

CSS 快速实现烟花绽放（仅100多行代码）

评论已关闭

推荐阅读