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