HTML5 SVG和CSS3炫酷液态菜单按钮特效

当前位置:主页 > Html5库 > SVG > HTML5 SVG和CSS3炫酷液态菜单按钮特效
HTML5 SVG和CSS3炫酷液态菜单按钮特效
分享:

    插件介绍

    这是一款使用HTML5 SVG Filters 和CSS3制作的效果非常炫酷的液态菜单按钮特效。该菜单特效开始时显示一个主菜单按钮,当点击该按钮时,子菜单按钮会像液态物质一样依次展开,其效果就像一粒水滴分离为两粒一样。

    浏览器兼容性

    浏览器兼容性
    时间:2015-04-08
    阅读:
简要教程

这是一款使用HTML5 SVG Filters 和CSS3制作的效果非常炫酷的液态菜单按钮特效。该菜单特效开始时显示一个主菜单按钮,当点击该按钮时,子菜单按钮会像液态物质一样依次展开,其效果就像一粒水滴分离为两粒一样。

制作方法

SVG Filters

SVG filters是十分有用的属性。虽然名字是SVG,但是 SVG filters 也可以通过CSS来使用在规则的HTML DOM元素上。下面是定义一个filter的基本语法:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="name-your-filter-here">
      ...          
      <!-- insert filters here -->
      ...
    </filter>
    ...
  </defs>
</svg>               
              

要在一个DOM元素上使用SVG filters,可以使用下面的CSS代码:

.selector {
  filter: url('#name-of-your-filter-here');

  /* you can also load filters from external SVGs this way: */
  filter: url('filters.svg#name-of-your-other-filter-here');
}                
              

注意:filter属性需要浏览器厂商前缀的支持。

一个<filter>元素可以包含一个或多个滤镜基元(filter primitives)。这些滤镜被用来制作各种过滤操作,如模糊、颜色转换、阴影效果等等。完整的可用滤镜可以查看这里

<filter id="blur">
  <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>                
              

这个滤镜会在元素上执行3像素的模糊效果。注意in="SourceGraphic"属性,in属性定义了一个滤镜的输入,SourceGraphic是一个关键字,它返回过滤前元素的预过滤图形。

关于颜色矩阵

如果你以前没有使用过颜色矩阵过滤器,你可以将它想象为下面这张表格。

svg颜色矩阵过滤器

每一行代表一个通道(红、绿、蓝和alpha),它用于设置通道的值。前面的4列代表一个通道,它们返回代表当前通道的值。每个单元一个数值,这个值代表了要添加在当前通到的其它通道值的系数,例如,在R行G列添加数值为0.5,那么会添加 green*0.5 到红色通道的每一个像素上。最后一列不代表任何通道,它用来执行添加或减去操作,意思是用该数值乘以255然后添加到该通道中。

上面的解释有写难懂,直接来看demo中的操作,demo中的颜色矩阵像下面的样子:

svg颜色矩阵过滤器-2

RGB通道都没有做修改,这些值和alpha通道的值18相乘,然后减去7*255,这样做有效地提高了单独的透明度的对比。这些值你可以根据需要自行调整。

要在feColorMatrix滤镜中应用这个矩阵,我们可以像下面这样书写数字序列:

values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"                
              

浏览器兼容

目前浏览器已经广泛的支持SVG。但是不是所有的浏览器都支持在DOM元素上使用SVG过滤器,特别是Safari浏览器。Firefox 和 Chrome可以正常工作,甚至是Android 版本的。如果需要更广泛的支持,可以考虑使用SVG元素而不是DOM元素。