HTML向四周扩散背景

html 复制代码
<!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>
相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架