爱心由多个烟花组成-Go服务器开发

要创建一个由多个烟花组成的跳动爱心效果，你可以使用 HTML、CSS 和 JavaScript。下面是一个简单示例，展示如何实现这个效果。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烟花组成的爱心</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: black;
        }
        .heart {
            position: relative;
            width: 100px;
            height: 100px;
            transform: rotate(-45deg);
            animation: heartbeat 1s infinite alternate; 
        }
        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red; /* 可以根据需要更改颜色 */
            border-radius: 50%;
        }
        .heart::before {
            top: -50px; 
            left: 0; 
        }
        .heart::after {
           left: 50px; 
        }
        @keyframes heartbeat {
           from { transform: scale(1); }
           to { transform: scale(1.2); }
       }
       /* 烟花样式 */
       .firework {
           position:absolute;
           bottom:-150%;
           opacity:.9;
           border-radius:.5rem;
           box-shadow:
              inset -5px -5px 10px rgba(255,255,255,.7),
              inset -20px -20px 15px rgba(255,165,0,.5),
              inset -25px -25px 25px rgba(255,20,147,.4);
           
           animation:
              explode ease-in-out forwards,
              fadeOut ease forwards;
       }
       @keyframes explode{
          from{
             transform :translateY(70%) scale(1);
          }
          to{
             transform : translateY(-300%) scale(.5)
          }
       }
       
       @keyframes fadeOut{
         from{
             opacity :1
         } 
         to{
             opacity :0
         }   
      }
    </style>
</head>
<body>
<div class="heart"></div>
<script>
function createFirework() {
    const firework = document.createElement('div');
    firework.className = 'firework';
    
    // 随机设置烟花的位置和大小
    const size = Math.random() * (30 - 10) + 10; // 随机大小在10到30之间
    firework.style.width = `${size}px`;
    firework.style.height = `${size}px`;
    
    // 设置随机位置
    firework.style.left = `${Math.random() * window.innerWidth}px`;
    document.body.appendChild(firework);
   // 在3秒后移除烟花元素
   setTimeout(() => {
      firework.remove();
   }, 2000);
}
// 每隔500毫秒生成一次烟花
setInterval(createFirework, 500);
</script>
</body>
</html>