元旦快乐代码有会动的烟花

最新推荐文章于 2024-06-04 17:13:54 发布

阅读量92

点赞数

文章标签： css javascript css3 前端开发语言

本文链接：https://blog.csdn.net/weixin_35750953/article/details/129074856

版权

您好！下面是一个在网页上显示会动的烟花的示例代码：

<html>
  <head>
    <style>
      body {
        background-color: black;
      }
      .firework {
        position: absolute;
        width: 2px;
        height: 2px;
        border-radius: 50%;
        background-color: white;
        animation: explode 0.7s linear;
      }
      @keyframes explode {
        from {
          transform: scale(0);
          opacity: 1;
        }
        to {
          transform: scale(100);
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div id="fireworks"></div>
    <script>
      const fireworkCount = 50;
      const fireworks = [];
      const colors = [
        "red",
        "orange",
        "yellow",
        "green",
        "blue",
        "indigo",
        "violet",
      ];
      const container = document.getElementById("fireworks");
      for (let i = 0; i < fireworkCount; i++) {
        const firework = document.createElement("div");
        firework.className = "firework";
        firework.style.top = `${Math.floor(Math.random() * 100)}vh`;
        firework.style.left = `${Math.floor(Math.random() * 100)}vw`;
        firework.style.backgroundColor =
          colors[Math.floor(Math.random() * colors.length)];
        container.appendChild(firework);
        fireworks.push(firework);
      }
      setInterval(() => {
        for (const firework of fireworks) {
          firework.style.top = `${Math.floor(Math.random() * 100)}vh`;
          firework.style.left = `${Math.floor(Math.random() * 100)}vw`;
          firework.style.backgroundColor =
            colors[Math.floor(Math.random() * colors.length)];
          firework.style.animation = "none";
          void firework.offsetWidth;
          firework.style.animation = "";
        }
      }, 2000);
    </script>
  </body>
</html>

这段代码使用了 HTML、CSS 和 JavaScript 来创建动态烟花效果。代码中的 setInterval 函数用于每隔一段时间调用一次回调函数，回调函数中的代码用于更新烟花的位置和颜色。 CSS 的 animation 属性用

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
元旦快乐代码有会动的烟花

您好！下面是一个在网页上显示会动的烟花的示例代码：<html> <head> <style> body { background-color: black; } .firework { position: absolute; width: 2px; ...
复制链接

扫一扫