svg滤镜介绍及制作黏合、水波等效果

15698次浏览

前言

张鑫旭,旭哥最近出了一本《css世界》的书,很佩服旭哥的认真钻研能力,css研究的很透彻,融入了很多自己观点和css是世界观。本文svg滤镜,主要开始于旭哥新书网站cssworld.cn ,网站购买按钮黏合效果很是吸引我。研究了一下,旭哥正是用了svg滤镜的一些效果!翻阅其博客,发现他前段时间也有文章介绍了这个效果。好吧,既然旭哥对这个效果已经做了介绍,那么今天我对这几个效果再简单介绍一下,并融入下自己的一些观点。

黏合效果

效果如下:

核心代码解释

本代码运用了css 的checkbox来控制按钮动画显示和隐藏 ,关于这一点,我之前也有文章介绍过,请点击链接,查看第15条!关于css,我这里就不多解释了!下面主要解释一下黏合代码svg

<svg width="0" height="0">
      <defs>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
          <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
      </defs>
    </svg>

为什么加了这段代码,再加一段

filter: url("#goo");

就可以实现黏合效果了呢?

主要是svg的几个滤镜起了作用:

1、feGaussianBlur 模糊滤镜

<svg width="230" height="120">
 <defs>
  <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
  </defs>
</svg>

上面定义了一个模糊滤镜,我们可以通过如下方法让一个div模糊

<div style="width:50px;height:50px;border-radius: 50%;background-color:green;filter: url(#blurMe);"></div>

同理feColorMatrix、feComposite 都是一个道理,三个融合再一个,就可以生成类似黏合的效果!

具体效果解释,可以参考文档:https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix

水波效果

水波效果一般用如下svg滤镜

<svg width="256" height="192">
  <defs>
    <radialGradient id="rg" r=".9"> 
      <stop offset="0%" stop-color="#f00"></stop>
      <stop offset="10%" stop-color="#000"></stop>
      <stop offset="20%" stop-color="#f00"></stop>
      <stop offset="30%" stop-color="#000"></stop>
      <stop offset="40%" stop-color="#f00"></stop>
      <stop offset="50%" stop-color="#000"></stop>
      <stop offset="60%" stop-color="#f00"></stop>
      <stop offset="70%" stop-color="#000"></stop>
      <stop offset="80%" stop-color="#f00"></stop>
      <stop offset="90%" stop-color="#000"></stop> 
      <stop offset="100%" stop-color="#f00"></stop>
    </radialGradient>                        
    <rect id="witness" width="256" height="192" fill="url(#rg)"></rect>

     <filter id="filter-ripple">
          <feImage result="pict2" xlink:href="#witness" x="0" y="0" width="256" height="192"></feImage>
          <feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="R" in2="pict2" in="SourceGraphic">
       </feDisplacementMap>
    </filter>    
  </defs>
</svg>

关于这一点,旭哥也写了,这里就不多累赘了!具体请看他的文章,关键是feImage的实现,旭哥使用canvas把经典的水波映射图绘制在画布上,然后转换成base64地址,赋予元素的xlink:href属性!

演示代码如下:

水波效果其他实现方案

目前关于水滴特效也有基于WebGL的,用jquery实现的插件,

具体请看:http://resource.haorooms.com/softshow-29-278-1.html

Tags: svgfilter

相关文章:

  1. randomGood
    1
    效果很赞,谢谢分享