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>
相关推荐
翻滚吧键盘15 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾20 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉28 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。34 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我2 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css