1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

Html5七种不同炫酷的SVG液态水滴融合动画特效

小川 特效组件
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

部分效果图:

000.gif

001.gif

002.gif

部分效果图:

描述说明:

简要教程

这是一组使用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 xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400">
  <defs>
    <filter id="blur" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="50" y="50" width="500" height="300" fill="#8d81ac" filter="url(#blur)" />  
</svg>

SVG FILTER模糊效果

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

  • SourceGraphic

  • SourceAlpha

  • BackgroundImage

  • BackgroundAlpha

  • FillPaint

  • StrokePaint


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

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


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
升级为VIP会员,有效期内免费下载本站所有VIP源码  点击升级为VIP

转载请注明来源地址:小川编程 » http://www.youhutong.com/index.php/article/index/298.html

郑重声明:
1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除
2、本站大多资源来源于高价购买、互联网、会员分享,仅供学习交流使用,本站不提供任何技术支持
3、如侵犯到任何版权问题,请立即告知本站,本站将及时删除并致以最深的歉意
4、如有侵犯您的版权,请提交软件证书、图片地址、源码链接和联系方式到Email:youhutong@youhutong.com

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情