<!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>HTML向四周扩散背景
2025/5/21 8:23:17
来源：https://blog.csdn.net/qq_15198465/article/details/148069646
浏览:
次
关键词：HTML向四周扩散背景
版权声明:
本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。
我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com
)
