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>
相关推荐
namekong814 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天15 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄18 小时前
HTML 表单控件
前端·microsoft·html
学习笔记10119 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194319 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧20 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台20 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪10020 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc21 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅1 天前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学