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

当前位置:主页 > Html5库 > SVG > 基于SVG过滤器的按钮变形动画特效
基于SVG过滤器的按钮变形动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-13
    阅读:
麦子学院
简要教程

这是一组基于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/

网友评论