7种炫酷HTML5 SVG液态水滴融合动画特效

简要教程

这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效。这些SVG动画特效使一些HTML元素，如菜单、分页按钮、APP、选择框等元素的过渡动画像几粒水滴一样融合分解，效果非常的酷。

SVG Filters

通过SVG Filters我们可以修改一个给定的图形，创建我们需要的结果。SVG中包含了一种可以执行各种操作的filter元素，下面列出了一些可用的SVG filter元素：

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

• feFlood

• feGaussianBlur

• feImage

• feMerge

• feMorphology

• feOffset

• feSpecularLighting

• feTile

• feTurbulence

• feDistantLight

• fePointLight

• feSpotLight

• SVG FILTER效果

当使用一个SVG filter的时候，我们可以将一个操作的结构作为另一个操作的输入，从而创建出无限的动画效果。

最常见的SVG filter效果是通过<feGaussianBlur>来制作模糊效果。

SVG FILTER模糊效果

<feGaussianBlur>元素的in属性用于定义原始的SVG输入，可以使用下面的几个关键字：

• SourceGraphic

• SourceAlpha

• BackgroundImage

• BackgroundAlpha

• FillPaint

• StrokePaint

这里也可以使用指向前一个执行结果的字符串，通过执行结果字符串，我们可以创建连续的动画效果。在液态水滴融合动画特效中就是使用这种方法制作的。

更为复杂的例子是组合使用多个SVG filter来制作所需的效果，如 drop shadow 阴影效果.

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com