html代码大全生日快乐烟花

HTML代码大全中有许多精美的代码，其中有一段特别适合生日祝福网站的设计——生日快乐烟花代码！

!DOCTYPE html>
    html>
      head>
        meta charset="UTF-8">
        title>
    生日快乐烟花/title>
        style>
      body {
            background: black;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
      }
      .fireworks {
            position: relative;
      }
      .fireworks span {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fffc00;
            animation: fireworks 2s infinite;
      }
      .fireworks span:nth-child(1) {
            top: 0;
            left: 20px;
            animation-delay: 0.2s;
      }
      .fireworks span:nth-child(2) {
            top: 40px;
            left: -20px;
            animation-delay: 0.4s;
      }
      .fireworks span:nth-child(3) {
            top: 60px;
            left: 40px;
            animation-delay: 0.6s;
      }
      .fireworks span:nth-child(4) {
            top: 80px;
            left: -10px;
            animation-delay: 0.8s;
      }
      @keyframes fireworks {
        0% {
              transform: translate(0, 0);
              opacity: 1;
        }
        50% {
              transform: translate(0, 20px);
              opacity: 0;
        }
        100% {
              transform: translate(0, 60px);
              opacity: 0;
        }
      }
        /style>
      /head>
      body>
        div class="fireworks">
          span>
    /span>
          span>
    /span>
          span>
    /span>
          span>
    /span>
        /div>
        script>
          const fireworks = document.querySelectorAll('.fireworks span');
          setInterval(() =>
 {
            fireworks[Math.floor(Math.random() * 4)].style.transform = 'translate(' + Math.floor(Math.random() * 300 - 150) + 'px,' + Math.floor(Math.random() * 100 - 50) + 'px)';
      }
    , 100);
        /script>
      /body>
    /html>
    

这段代码通过简单的HTML和CSS实现了一个烟花的动画效果，可以作为网页的背景或者祝福卡片的动态元素，非常生动和有趣。

另外，为了让烟花动画更加随机和丰富，我们可以使用JavaScript来控制烟花的随机位置，例如上述代码中的setInterval函数就实现了每100毫秒随机改变一个烟花的位置。

总之，HTML代码大全中的生日快乐烟花代码不仅美观、简单，而且富有互动性，非常适合用来为生日祝福网站增添一份欢乐和惊喜。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！