當我們不用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多平臺發布