当前位置：首页 > article >正文

HTML向四周扩散背景

article 2025/9/14 19:42:01

<!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>