【温馨提示】源码包解压密码:www.youhutong.com
部分效果图:
部分效果图:
描述说明:
简要教程
这是一组使用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效果是通过来制作模糊效果。
SVG FILTER模糊效果
元素的in属性用于定义原始的SVG输入,可以使用下面的几个关键字:SourceGraphic
SourceAlpha
BackgroundImage
BackgroundAlpha
FillPaint
StrokePaint
这里也可以使用指向前一个执行结果的字符串,通过执行结果字符串,我们可以创建连续的动画效果。在液态水滴融合动画特效中就是使用这种方法制作的。
更为复杂的例子是组合使用多个SVG filter来制作所需的效果,如 drop shadow 阴影效果.
浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
【温馨提示】源码包解压密码:www.youhutong.com
郑重声明:
1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除
2、本站大多资源来源于互联网、用户分享,仅供学习交流使用,本站不提供任何技术支持
3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意