基于SVG过滤器的按钮变形动画特效

这是一组基于SVG过滤器的按钮变形动画特效。通过为HTML元素添加SVG滤镜可以制作出非常有趣的效果，在这组效果中有按钮扭曲震动，波浪效果，Gooey效果等10种不同的按钮点击效果。

这组基于SVG过滤器的按钮变形动画特效目前只有Chrome和Firefox浏览器才支持，关于支持CSS filters（CSS过滤器）的浏览器，可以查看这里。

使用方法

HTML结构

特效中使用的按钮是一个<button>元素。

<button class="button">按　钮</button>
                

然后在HTML中，在<svg>元素中定义一个滤镜。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
  <defs>
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
    </filter>
  </defs>
</svg>                  
                

接着在CSS中为按钮使用滤镜效果。

.button {
  /* other styles */
  -webkit-filter: url("#filter");
  filter: url("/#filter");
}                  
                

注意filter: url("/#filter");声明中的“/”，在Firefox中必须带上它才能有滤镜效果。

关于SVG过滤器的使用方法，可以参考：SVG进阶 | SVG过滤器（SVG Filters）

原文地址：http://tympanus.net/codrops/2016/05/11/distorted-button-effects-with-svg-filters/