这是什么原因导致（b + w和模糊）效果？

问题描述：

我想知道，如果有人可以给我的任何想法，以什么产生在这个网站 http://www.ralphlauren.com/home/index.jsp?ab=global_logo 这是什么原因导致（b + w和模糊）效果？

模糊/ B + W的效果，当鼠标移动到菜单栏主滑块B + W和重点。这是用css动画完成的吗？当我看到该链接并挖出出来

感谢输入

如果你在网站上看到很酷的东西，并想看看他们是如何做到的，可以按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; 
}

我知道这些存在，但实际上并不知道你可以使用它们。被警告他们是非常资源密集型的，所以你需要谨慎使用它们。

谢谢@Shan。非常感激。同样在这里。没有真正使用过滤器。浏览器支持，如果其他人发现这个http://caniuse.com/#feat=css-filters – sambomartin 2014-10-13 08:15:10

这是什么原因导致（b + w和模糊）效果？

相关推荐