首页 > filter模拟阴影效果

filter模拟阴影效果

这个网址里面:https://stripe.com/atlas

Stripe: Atlas 网站的两个主按钮,第一次看到它们的时候就觉得这两个按钮的阴影很特别,Hover的手感很柔和,感觉很奇妙,出于本能地就Inspect Element了一下,果然发现了玄妙所在。

.call-to-action .shadow
{
display:block;
position:absolute;
left:1px;
right:1px;
top:4px;
bottom:-4px;
-webkit-filter:blur(7px);
will-change:transform;
transition:transform 1.5s
   cubic-bezier(.2.1,.3,1);
}

使用了-webkit-filter的blur来模拟阴影效果,并且还设置了专门的transition动画曲线

请问下这里玄妙所在。一般的人怎么做这种效果,这个网站怎么做的这个效果呢?


blur 在IE10 以下是不支持的,也会比 box-shadow更加消耗性能。
用 boxshadow + transition,显示出来是另一种视觉效果了。

【热门文章】
【热门文章】