本文主要包含HTML5教程,HTML5中国,7种炫酷HTML5 SVG液态水滴融合动画特效,html5cn,html5资料,html等相关知识,匿名希望在学习及工作中可以帮助到您
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效。这些SVG动画特效使一些HTML元素，如菜单、分页按钮、APP、选择框等元素的过渡动画像几粒水滴一样融合分解，效果非常的酷。
复制代码
所得到的结果如下图：
这里也可以使用指向前一个执行结果的字符串，通过执行结果字符串，我们可以创建连续的动画效果。在液态水滴融合动画特效中就是使用这种方法制作的。
更为复杂的例子是组合使用多个SVG filter来制作所需的效果，如 drop shadow 阴影效果：
复制代码
得到的结果如下：
SVG Filters for HTML
在HTML元素上使用SVG Filters十分简单。可以在HTML页面中定义需要的SVG Filter，然后可以通过CSS样式表来使用它们：
-webkit-filter: url("#goo");
filter: url("../index.html#goo");
} 复制代码
定义一个没有-webkit-前缀的不同路径值有两个原因：一是为了使Firefox浏览器能够正确的找到该路径。二是对于相对路径，如果我们只使用#goo，它会在当前页面中查找样式表，而我们使用的是引用样式表，因此会找不到这个filter。通过设置这种设置，不论是内置样式表还是外部样式表，都可以正确的找到所需的filter。我们也可以通过JavaScript来添加filter。
$effectContainer.css({
webkitFilter: value,
filter: value,
});
} 复制代码
上面的value值类似于'url(#goo)'。
当前浏览器对在HTML元素上使用 SVG Filters 的支持非常好，可以查看这里。
下面是一些学习SVG Filters的好资料，可以学习参考：
应用举例
我们来看看其中的
在线演示
7种炫酷HTML5 SVG液态水滴融合动画特效.zip
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效果是通过
所得到的结果如下图：
- SourceGraphic
- SourceAlpha
- BackgroundImage
- BackgroundAlpha
- FillPaint
- StrokePaint
这里也可以使用指向前一个执行结果的字符串，通过执行结果字符串，我们可以创建连续的动画效果。在液态水滴融合动画特效中就是使用这种方法制作的。
更为复杂的例子是组合使用多个SVG filter来制作所需的效果，如 drop shadow 阴影效果：
得到的结果如下：
SVG Filters for HTML
在HTML元素上使用SVG Filters十分简单。可以在HTML页面中定义需要的SVG Filter，然后可以通过CSS样式表来使用它们：
定义一个没有-webkit-前缀的不同路径值有两个原因：一是为了使Firefox浏览器能够正确的找到该路径。二是对于相对路径，如果我们只使用#goo，它会在当前页面中查找样式表，而我们使用的是引用样式表，因此会找不到这个filter。通过设置这种设置，不论是内置样式表还是外部样式表，都可以正确的找到所需的filter。我们也可以通过JavaScript来添加filter。
上面的value值类似于'url(#goo)'。
当前浏览器对在HTML元素上使用 SVG Filters 的支持非常好，可以查看这里。
下面是一些学习SVG Filters的好资料，可以学习参考：
- Applying SVG effects to HTML content
- Hands On: SVG Filter Effects
- Cross-browser filters with CSS and SVG
- Smarter SVG filters
- How to go beyond the basics with SVG filters
应用举例
我们来看看其中的