浙江 杭州

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

系统分类: 网页特效 - html5 - html5模板 2016-11-13

人气7576

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款使用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元素。

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:73.75KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2094.html 非特殊说明,本文版权归原作者所有,转载请注明出处
HTML5 SVG和CSS3炫酷液态菜单按钮特效

我当前G币余额:0 已下载次数:1

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有1 评论)