Question

我是一名眼科医生，我使用GoDaddy创建了我的个人网站，我曾经在当天用html，css，js编曲，但从那以后它已经用了大约5年。

大图：当用户访问我的页面时，我希望它模糊（就像你需要眼镜一样），然后我想从显示器的两侧出现两个手臂并“戴上”一副眼镜。如果你真的戴上一副眼镜，我希望它看起来尽可能接近。

然后当“眼镜”打开时，模糊渐渐消失并变得晶莹剔透。

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

你知道以前做过这样的事吗？你能给我一个良好的开端，还是指点一些资源来帮助我？非常感谢！

Answer 1

这是你如何做模糊/ unblur。请记住，这会使移动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);
}
}

http://codepen.io/damianocel/pen/MaZPBz

动画设置为15秒，给它时间，我这样做是为了让效果看起来更顺畅。现在对于眼镜和手，我也可以用Css做到这一点，取决于它允许看起来多么微不足道： - ）

如何让我的整个网站模糊，重新聚焦？

1 个答案: