我怎樣才能讓我的整個網站模糊，淡入淡出？

-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

我怎樣才能讓我的整個網站模糊，淡入淡出？

回答

相關問題