Untitled

<!DOCTYPE html>
<html>
<head>
  <style>
    #lights {
      width: 100%;
      height: 100vh;
      background-color: black;
    }

    .light {
      width: 10px;
      height: 100%;
      position: absolute;
      bottom: 0;
      animation: lightEffect 3s infinite ease-in-out;
    }

    @keyframes lightEffect {
      0% {
        height: 100%;
        opacity: 1;
        background-color: rgba(255, 0, 0, 0.3);
      }
      50% {
        height: 50%;
        opacity: 0.7;
        background-color: rgba(0, 255, 0, 0.3);
      }
      100% {
        height: 100%;
        opacity: 1;
        background-color: rgba(0, 0, 255, 0.3);
      }
    }
  </style>
</head>
<body>
  <div id="lights"></div>

  <script>
    const lightsContainer = document.getElementById('lights');
    const numLights = 40;

    for (let i = 0; i < numLights; i++) {
      const light = document.createElement('div');
      light.classList.add('light');
      light.style.left = `${(i * 2) + 1}%`; // Spread the lights evenly across the container
      light.style.animationDelay = `${(i / numLights) * 3}s`; // Delay each light's animation
      light.style.backgroundColor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.3)`; // Random RGB color with 0.3 alpha
      lightsContainer.appendChild(light);
    }
  </script>
</body>
</html>
Editor is loading...