姜仙人

V1

2022/08/08阅读:21主题:蔷薇紫

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

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

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

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

也可以是这样的

源代码

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

<div class="c-firework"></div>
body {
 background#000;
}

@keyframes fireworks-animation {
 0% {
  transformtranslate(-50%90vh);
  width4px;
  opacity1;
 }
 50% {
  width4px;
  opacity1;
 }
 100% {
  width400px;
  opacity0;
 }
}

.c-firework,
.c-firework::before,
.c-firework::after {
 content"";
 position: absolute;
 top50%;
 left50%;
 aspect-ratio1;
 backgroundradial-gradient(circle, #ff0 10px, #000 050% 00%,
  radial-gradient(circle, #ff0 10px, #000 000% 50%,
  radial-gradient(circle, #ff0 10px, #000 050% 99%,
  radial-gradient(circle, #ff0 10px, #000 099% 50%,
  radial-gradient(circle, #ff0 10px, #000 080% 90%,
  radial-gradient(circle, #ff0 10px, #000 095% 90%,
  radial-gradient(circle, #ff0 10px, #000 010% 60%,
  radial-gradient(circle, #ff0 10px, #000 031% 80%,
  radial-gradient(circle, #ff0 10px, #000 080% 10%,
  radial-gradient(circle, #ff0 10px, #000 090% 23%,
  radial-gradient(circle, #ff0 10px, #000 045% 20%,
  radial-gradient(circle, #ff0 10px, #000 013% 24%;
 background-size4px 4px;
 background-repeat: no-repeat;
 transformtranslate(-50%, -50%);
 animation: fireworks-animation 4s infinite;
}
.c-firework::before {
 transformtranslate(-50%, -50%rotate(25deg!important;
}
.c-firework::after {
 transformtranslate(-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% {
  transformtranslate(-50%90vh);
  width4px;
  opacity1;
 }
 50% {
  width4px;
  opacity1;
 }
 100% {
  width600px;
  opacity0;
 }
}

.c-firework,
.c-firework::before,
.c-firework::after {
 content"";
 position: absolute;
 top50%;
 left50%;
 aspect-ratio1;
 backgroundradial-gradient(circle, yellow 10px, #000 050% 00%,
  radial-gradient(circle, khaki 10px, #000 000% 50%,
  radial-gradient(circle, white 10px, #000 050% 99%,
  radial-gradient(circle, lime 10px, #000 099% 50%,
  radial-gradient(circle, crimson 10px, #000 080% 90%,
  radial-gradient(circle, red 10px, #000 095% 90%,
  radial-gradient(circle, yellow 10px, #000 010% 60%,
  radial-gradient(circle, khaki 10px, #000 031% 80%,
  radial-gradient(circle, white 10px, #000 080% 10%,
  radial-gradient(circle, lime 10px, #000 090% 23%,
  radial-gradient(circle, crimson 10px, #000 045% 20%,
  radial-gradient(circle, red 10px, #000 013% 24%;
 background-size8px 8px;
 background-repeat: no-repeat;
 transformtranslate(-50%, -50%);
 animation: fireworks-animation 4s infinite;
}
.c-firework::before {
 transformtranslate(-50%, -50%rotate(25deg!important;
}
.c-firework::after {
 transformtranslate(-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 {
 top30%;
 left16%;
 animation-duration3.8s;
}
.c-firework:nth-of-type(3),
.c-firework:nth-of-type(3)::before,
.c-firework:nth-of-type(3)::after {
 top10%;
 left72%;
 animation-duration4.2s;
}
.c-firework:nth-of-type(4),
.c-firework:nth-of-type(4)::before,
.c-firework:nth-of-type(4)::after {
 top28%;
 left32%;
 animation-duration3.6s;
}
.c-firework:nth-of-type(5),
.c-firework:nth-of-type(5)::before,
.c-firework:nth-of-type(5)::after {
 top32%;
 left84%;
 animation-duration4.4s;
}
.c-firework:nth-of-type(6),
.c-firework:nth-of-type(6)::before,
.c-firework:nth-of-type(6)::after {
 top38%;
 left40%;
 animation-duration4.1s;
}
.c-firework:nth-of-type(7),
.c-firework:nth-of-type(7)::before,
.c-firework:nth-of-type(7)::after {
 top28%;
 left64%;
 animation-duration3.9s;
}
.c-firework:nth-of-type(8),
.c-firework:nth-of-type(8)::before,
.c-firework:nth-of-type(8)::after {
 top30%;
 left56%;
 animation-duration3.9s;
}

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

分类:

前端

标签:

CSS

作者介绍

姜仙人
V1