当我们不用Canvas和JavaScript，仅使用CSS如何创建烟花？

本文链接：https://blog.csdn.net/weixin_41556756/article/details/126224030

当我们不用Canvas和JavaScript，仅使用CSS如何创建烟花？

前端的烟花特效我们见过很多，但大多数都是用Canvas和JavaScript创建出来的，

所以……让我们仅使用HTML和CSS来创建烟花吧~

也可以是这样的

源代码

这次我将只使用 HTML 和 CSS 来制作它。所以我有点累，但是...

<div class="c-firework"></div>

body {
 background: #000;
}

@keyframes fireworks-animation {
 0% {
  transform: translate(-50%, 90vh);
  width: 4px;
  opacity: 1;
 }
 50% {
  width: 4px;
  opacity: 1;
 }
 100% {
  width: 400px;
  opacity: 0;
 }
}

.c-firework,
.c-firework::before,
.c-firework::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 aspect-ratio: 1;
 background: radial-gradient(circle, #ff0 10px, #000 0) 50% 00%,
  radial-gradient(circle, #ff0 10px, #000 0) 00% 50%,
  radial-gradient(circle, #ff0 10px, #000 0) 50% 99%,
  radial-gradient(circle, #ff0 10px, #000 0) 99% 50%,
  radial-gradient(circle, #ff0 10px, #000 0) 80% 90%,
  radial-gradient(circle, #ff0 10px, #000 0) 95% 90%,
  radial-gradient(circle, #ff0 10px, #000 0) 10% 60%,
  radial-gradient(circle, #ff0 10px, #000 0) 31% 80%,
  radial-gradient(circle, #ff0 10px, #000 0) 80% 10%,
  radial-gradient(circle, #ff0 10px, #000 0) 90% 23%,
  radial-gradient(circle, #ff0 10px, #000 0) 45% 20%,
  radial-gradient(circle, #ff0 10px, #000 0) 13% 24%;
 background-size: 4px 4px;
 background-repeat: no-repeat;
 transform: translate(-50%, -50%);
 animation: fireworks-animation 4s infinite;
}
.c-firework::before {
 transform: translate(-50%, -50%) rotate(25deg) !important;
}
.c-firework::after {
 transform: translate(-50%, -50%) rotate(-37deg) !important;
}

transform用于从下向上移动，使opacity实现烟花闪烁，width调整烟花的散布，background-color调整烟花颜色

应用模式

通过应用这个代码，可以随机发射多个烟花。通过调整位置坐标和动画速度，可以很好地燃放多个烟花。

<div class="c-firework"></div>
<div class="c-firework"></div>
<div class="c-firework"></div>
<div class="c-firework"></div>
<div class="c-firework"></div>
<div class="c-firework"></div>
<div class="c-firework"></div>
<div class="c-firework"></div>

body {
 background: #000;
}

@keyframes fireworks-animation {
 0% {
  transform: translate(-50%, 90vh);
  width: 4px;
  opacity: 1;
 }
 50% {
  width: 4px;
  opacity: 1;
 }
 100% {
  width: 600px;
  opacity: 0;
 }
}

.c-firework,
.c-firework::before,
.c-firework::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 aspect-ratio: 1;
 background: radial-gradient(circle, yellow 10px, #000 0) 50% 00%,
  radial-gradient(circle, khaki 10px, #000 0) 00% 50%,
  radial-gradient(circle, white 10px, #000 0) 50% 99%,
  radial-gradient(circle, lime 10px, #000 0) 99% 50%,
  radial-gradient(circle, crimson 10px, #000 0) 80% 90%,
  radial-gradient(circle, red 10px, #000 0) 95% 90%,
  radial-gradient(circle, yellow 10px, #000 0) 10% 60%,
  radial-gradient(circle, khaki 10px, #000 0) 31% 80%,
  radial-gradient(circle, white 10px, #000 0) 80% 10%,
  radial-gradient(circle, lime 10px, #000 0) 90% 23%,
  radial-gradient(circle, crimson 10px, #000 0) 45% 20%,
  radial-gradient(circle, red 10px, #000 0) 13% 24%;
 background-size: 8px 8px;
 background-repeat: no-repeat;
 transform: translate(-50%, -50%);
 animation: fireworks-animation 4s infinite;
}
.c-firework::before {
 transform: translate(-50%, -50%) rotate(25deg) !important;
}
.c-firework::after {
 transform: translate(-50%, -50%) rotate(-37deg) !important;
}

.c-firework:nth-of-type(2),
.c-firework:nth-of-type(2)::before,
.c-firework:nth-of-type(2)::after {
 top: 30%;
 left: 16%;
 animation-duration: 3.8s;
}
.c-firework:nth-of-type(3),
.c-firework:nth-of-type(3)::before,
.c-firework:nth-of-type(3)::after {
 top: 10%;
 left: 72%;
 animation-duration: 4.2s;
}
.c-firework:nth-of-type(4),
.c-firework:nth-of-type(4)::before,
.c-firework:nth-of-type(4)::after {
 top: 28%;
 left: 32%;
 animation-duration: 3.6s;
}
.c-firework:nth-of-type(5),
.c-firework:nth-of-type(5)::before,
.c-firework:nth-of-type(5)::after {
 top: 32%;
 left: 84%;
 animation-duration: 4.4s;
}
.c-firework:nth-of-type(6),
.c-firework:nth-of-type(6)::before,
.c-firework:nth-of-type(6)::after {
 top: 38%;
 left: 40%;
 animation-duration: 4.1s;
}
.c-firework:nth-of-type(7),
.c-firework:nth-of-type(7)::before,
.c-firework:nth-of-type(7)::after {
 top: 28%;
 left: 64%;
 animation-duration: 3.9s;
}
.c-firework:nth-of-type(8),
.c-firework:nth-of-type(8)::before,
.c-firework:nth-of-type(8)::after {
 top: 30%;
 left: 56%;
 animation-duration: 3.9s;
}