乐趣区

关于程序员:当我们不用Canvas和JavaScript仅使用CSS如何创建烟花

jiezi

当咱们不必 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 多平台公布

退出移动版