HTML向四周扩散背景

news2025/5/20 12:48:47

<!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 {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        overflow: hidden;
      }

      button {
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }

      #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0;
        pointer-events: none;
        z-index: 100;
      }

      #circle {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background-color: black;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 101;
      }
    </style>
  </head>
  <body>
    <button id="toggleBtn">点击切换背景</button>
    <div id="overlay"></div>
    <div id="circle"></div>

    <script src="script.js"></script>
  </body>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const toggleBtn = document.getElementById("toggleBtn");
      const overlay = document.getElementById("overlay");
      const circle = document.getElementById("circle");
      let isAnimating = false;

      toggleBtn.addEventListener("click", () => {
        if (!isAnimating) {
          isAnimating = true;

          // 开始扩散动画
          let radius = 0;
          const maxRadius = Math.sqrt(
            window.innerWidth * window.innerWidth +
              window.innerHeight * window.innerHeight
          );

          const animate = () => {
            if (radius < maxRadius) {
              radius += 5;
              circle.style.width = `${radius * 2}px`;
              circle.style.height = `${radius * 2}px`;
              animate();
            } else {
              // 扩散完成后，显示黑色背景
              overlay.style.opacity = "1";
              circle.style.opacity = "0";
              isAnimating = false;
            }
          };

          animate();
        }
      });
    });
  </script>
</html>