Question

我想知道是否有人可以就此网站上产生模糊/ b + w效果的内容给出任何想法 http://www.ralphlauren.com/home/index.jsp?ab=global_logo

当鼠标位于菜单栏上方时，主滑块为b + w并对焦。这是用css动画完成的吗？

感谢输入

Answer 1

当我看到链接并将其挖出时感兴趣。没什么好看的。

@-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;
}

我知道这些存在，但实际上并不知道你可以使用它们。请注意，它们非常耗费资源，因此您需要谨慎使用它们。

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

1 个答案: