当我们不用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;
}

最后。
让我们一起欣赏一下屏幕上的烟花吧👋

本文由mdnice多平台发布