当网页失去焦点时试图模糊网站。我尝试使用 OnBlur 和 Focusin/out
我尝试将 OnBlur 与 body 标签、html 标签一起使用。我什至尝试了听众、一堆不同的 JS 和其他东西。
我正在努力做到这一点，以便我的网站逐渐变成类似高斯的模糊，并带有一些文字，例如“come baaaackkk :(”或类似的愚蠢内容
为此，您需要使用 visibilitychange 事件。试试下面的代码：
const pageTitle = document.title;
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
const blurredDiv = document.createElement("div");
blurredDiv.id = "blur";
blurredDiv.innerHTML = "<h1>Come Back :(</h1>";
document.body.appendChild(blurredDiv);
document.title = "Come Back :(";
} else {
setTimeout(() => {
const blurredDiv = document.getElementById("blur");
blurredDiv.parentNode.removeChild(blurredDiv);
document.title = pageTitle;
}, 1000);
}
});
document.hiddensetTimemout和相应的CSS：
#blur {
z-index: 9999;
background: rgb(255, 255, 255, 0.2);
backdrop-filter: blur(3px);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
/* For the h1 inside this div */
display: grid;
place-items: center;
}
如果你想在工作中看到这个，请仔细看看这个codepen
这是一个仅使用 CSS 的简单解决方案。
随意根据您的需要修改它
blurred {
filter: blur(2px);
}
html:hover blurred {
filter: blur(0)
}
html:hover unblurred {
opacity: 0;
}
unblurred {
opacity: 1;
}<body>
<blurred>
This will get blurred
</blurred>
<unblurred>
This will appear not blurred
</unblurred>
</body>