html制作流星雨烟花表白代码

HTML制作流星雨烟花表白代码在浪漫的夜晚，制作一份特别的表白代码，用流星雨和烟花为自己的爱情加上一份浪漫的味道。代码如下：

html制作流星雨烟花表白代码

  
    <!DOCTYPE html>
    <html>
    <head>
      <title>My love</title>
      <style>
        body {
          background-color: #000;
        }
        .meteor {
          position: absolute;
          width: 10px;
          height: 40px;
          background-color: #fff;
          border-radius: 100%;
          transform: rotate(45deg);
          animation: meteor 2s linear infinite;
          Box-shadow: 0 0 20px #fff;
        }
        @keyframes meteor {
          0% {
            top: -50px;
            left: 50px;
            opacity: 0;
            transform: rotate(45deg) translateY(0);
            filter: blur(5px);
          }
          100% {
            top: 120vh;
            left: -20vw;
            opacity: 1;
            transform: rotate(45deg) translateY(50vh);
            filter: blur(0);
          }
        }
        .firework {
          position: absolute;
          width: 5px;
          height: 5px;
          background-color: #f00;
          border-radius: 100%;
          animation: firework 2s cubic-bezier(0.47,0.1,0.6,1.2) infinite;
          Box-shadow: 0 0 30px #f00,0 0 50px #f00,0 0 70px #f00;
        }
        @keyframes firework {
          0% {
            top: 50vh;
            left: 100vw;
            opacity: 0;
          }
          100% {
            top: 0;
            left: 0;
            opacity: 1;
          }
        }
      </style>
    </head>
    <body>
      <div class="meteor"></div>
      <div class="meteor"></div>
      <div class="meteor"></div>
      <div class="meteor"></div>

      <div class="firework"></div>
      <div class="firework"></div>
      <div class="firework"></div>
      <div class="firework"></div>
    </body>
    </html>

以上代码包含了两个动画效果：流星雨和烟花。通过将流星和烟花的div标签定位在绝对位置上，使用CSS3动画实现了不断跳出和消失的效果。同时，通过控制动画时间和变化曲线，让动画效果更加顺滑自然。这份代码适合用在表白场合中，给恋人一个独特而浪漫的惊喜。也可以根据个人的喜好进行修改，添加自己喜欢的元素或文字，让表白更具个性化。

html制作流星雨烟花表白代码

相关推荐