這是什麼原因導致（b + w和模糊）效果？

我想知道，如果有人可以給我的任何想法，以什麼產生在這個網站 http://www.ralphlauren.com/home/index.jsp?ab=global_logo 這是什麼原因導致（b + w和模糊）效果？

模糊/ B + W的效果，當鼠標移動到菜單欄主滑塊B + W和重點。這是用css動畫完成的嗎？當我看到該鏈接並挖出出來

感謝輸入

2014-10-10 sambomartin

如果你在網站上看到很酷的東西，並想看看他們是如何做到的，可以按f12（在電腦上）調出開發者工具。您可以看到該網站的所有html和css。你甚至可以改變CSS或HTML。 – Dominofoe 2014-10-11 03:16:32

很感興趣。沒有什麼花哨。

@-webkit-keyframes blurred { 
    100% { -webkit-filter: blur(2px) grayscale(0.8); } 
} 
@-webkit-keyframes unblurred { 
    100% { -webkit-filter: blur(0px) grayscale(0); } 
} 
.navOver.no-touch #hero_carousel .slide, 
.navOver.no-touch #hero_carousel .slide .slide_copy { 
    -webkit-animation:blurred 1s ease; 
    -webkit-animation-fill-mode: forwards; 
} 
.no-touch #hero_carousel .slide, 
.no-touch #hero_carousel .slide .slide_copy { 
    -webkit-animation:unblurred 1s ease; 
    -webkit-animation-fill-mode: forwards; 
}

我知道這些存在，但實際上並不知道你可以使用它們。被警告他們是非常資源密集型的，所以你需要謹慎使用它們。

來源

2014-10-11 00:19:42

謝謝@Shan。非常感激。同樣在這裏。沒有真正使用過濾器。瀏覽器支持，如果其他人發現這個http://caniuse.com/#feat=css-filters – sambomartin 2014-10-13 08:15:10

這是什麼原因導致（b + w和模糊）效果？

回答

相關問題