这是一组使用html5 svg过滤器制作的炫酷液态水滴融合动画特效。这些svg动画特效使一些html元素,如菜单、分页按钮、app、选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷。
在线演示
7种炫酷html5 svg液态水滴融合动画特效.zip
svg filters
通过svg filters我们可以修改一个给定的图形,创建我们需要的结果。svg中包含了一种可以执行各种操作的filter元素,下面列出了一些可用的svg filter元素:
feblendfecolormatrixfecomponenttransferfecompositefeconvolvematrixfediffuselightingfedisplacementmapfefloodfegaussianblurfeimagefemergefemorphologyfeoffsetfespecularlightingfetilefeturbulencefedistantlightfepointlightfespotlight
当使用一个svg filter的时候,我们可以将一个操作的结构作为另一个操作的输入,从而创建出无限的动画效果。
最常见的svg filter效果是通过来制作模糊效果。
复制代码
所得到的结果如下图:
元素的in属性用于定义原始的svg输入,可以使用下面的几个关键字:
sourcegraphicsourcealphabackgroundimagebackgroundalphafillpaintstrokepaint
这里也可以使用指向前一个执行结果的字符串,通过执行结果字符串,我们可以创建连续的动画效果。在液态水滴融合动画特效中就是使用这种方法制作的。
更为复杂的例子是组合使用多个svg filter来制作所需的效果,如 drop shadow 阴影效果:
复制代码
得到的结果如下:
这种效果的原理是先移动元素,然后将该元素的副本进行模糊处理来制作阴影效果。通过feblend使用in=sourcealpha简单的设置原始图像位于模糊图像的上面。该通道是原始图像的alpha通道,模糊后会变为黑色。
svg filters for html
在html元素上使用svg filters十分简单。可以在html页面中定义需要的svg filter,然后可以通过css样式表来使用它们:
.filterclass {
-webkit-filter: url(#goo);
filter: url(../index.html#goo);
}
复制代码
定义一个没有-webkit-前缀的不同路径值有两个原因:一是为了使firefox浏览器能够正确的找到该路径。二是对于相对路径,如果我们只使用#goo,它会在当前页面中查找样式表,而我们使用的是引用样式表,因此会找不到这个filter。通过设置这种设置,不论是内置样式表还是外部样式表,都可以正确的找到所需的filter。我们也可以通过javascript来添加filter。
function setfilter(value){
$effectcontainer.css({
webkitfilter: value,
filter: value,
});
}
复制代码
上面的value值类似于'url(#goo)'。
当前浏览器对在html元素上使用 svg filters 的支持非常好,可以查看这里。
下面是一些学习svg filters的好资料,可以学习参考:
applying svg effects to html contenthands on: svg filter effectscross-browser filters with css and svgsmarter svg filtershow to go beyond the basics with svg filters
应用举例
我们来看看其中的圆形菜单按钮例子的实现方法:
这种效果的html代码如下:
复制代码
在html中定义一个内联的svg对象:
复制代码
接下来使用如上面所说的css filter 属性来指定filter的路径和样式:
.menu {
/* other styles */
-webkit-filter: url(#goo);
filter: url(../menu.html#goo);
}
复制代码
下面来分析一些filter,filter的第一步操作是通过fegaussianblur来模糊对象。
接下来是fecolormatrix过滤器,它在例子中的作用的增强alpha通道,于blur结合,创建更加强烈的模糊效果。
learn more about how to apply a color matrix here.
最后,wilder使某些元素可见,需要在模糊对象只是绘制原始的对象,为了做到这一点,我们在atop操作中使用fecomposite过滤器。
via:http://www.htmleaf.com/html5/svg/201503111500.html