Javascript 我怎样才能使我的整个网站变得模糊，然后重新聚焦？

我是一名眼科医生，我用GoDaddy创建了我的个人网站，我过去常常摆弄html、css、js，但从那时起已经5年了

大画面：当用户访问我的页面时，我希望它变得模糊（就像你需要眼镜一样），然后我希望从显示屏的侧面显示两只手臂，并“戴上”一副眼镜。我希望它看起来尽可能接近你是否真的戴上了一副眼镜

然后，当“眼镜”打开时，模糊度消失，变得非常清晰

我制作了html和css文件，但没有上面的任何动画

---

你知道以前有没有做过类似的事情吗？你能给我一个先例，或者告诉我一些可以帮助我的资源吗？非常感谢你

以下是如何进行模糊/取消模糊。 请记住，这将使移动CPU过载，它不适合移动使用

@keyframes filter-animation {
0% {
-webkit-filter: blur(10px);filter: blur(10px);
}

33% {
-webkit-filter: blur(550px);filter: blur(550px);
}

55% {
-webkit-filter: blur(10px);filter: blur(10px);
}
}

动画设置为15秒，给它时间，我这样做是为了使效果看起来更平滑。

---

现在，对于眼镜和手，我也可以用Css来做，这取决于它看起来有多琐碎：-）

看看这个，我有点想在完成后看到它。你可以用Css动画来制作动画和模糊效果，或者在页面上添加一个全屏视频；）我喜欢全屏视频的想法，有没有一种方法可以让它占据整个网页，然后在视频完成后无缝地过渡到网站？

html.locked#page{opacity:0.5；-webkit filter:blur（10px）；}

根据需要调整和设置动画。