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>
相关推荐
牧羊狼的狼3 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手5 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one5 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲5 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell5 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830947 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮7 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel8 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip8 小时前
JavaScript事件流
前端·javascript
CodeCraft Studio8 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换