我怎样才能让我的整个网站模糊，淡入淡出？

-3

我是一名眼科医生，我使用GoDaddy创建了我的个人网站，我曾经在当天使用html，css，js进行操作，但距离它已经有5年左右的时间了。当用户访问我的页面时，我想让它变得模糊（就像你需要眼镜一样），然后我想从显示器两侧出现两只手臂，并“戴上”一副眼镜。如果你真的戴上一副眼镜，我希望它看起来尽可能接近。我怎样才能让我的整个网站模糊，淡入淡出？

然后，当“眼镜”开启时，模糊会消失并变得清澈透明。

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

你知道之前有过这样的事吗？你能给我一个开始或者指点我一些资源来帮助吗？非常感谢！

来源

2015-11-13 user3481670

检查了这一点 http://stackoverflow.com/questions/371209/full-page- blur-in-css – Jah

我很想在完成时看到它。 –

您可以对动画http://www.w3schools.com/css/css3_animations.asp和https：//developer.mozilla使用CSS动画。 org/de/docs/Web/CSS /过滤器以获得模糊效果，或者将全屏视频添加到您的页面;） – jan

这里是你如何做模糊/ 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来做到这一点，取决于它允许看起来多么微不足道:-)

来源

2015-11-14 00:33:54

我怎样才能让我的整个网站模糊，淡入淡出？

回答

相关问题