Rumah  >  Artikel  >  hujung hadapan web  >  7种炫酷HTML5 SVG液态水滴融合动画特效

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

WBOY
WBOYasal
2016-05-17 09:07:462143semak imbas
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效。这些SVG动画特效使一些HTML元素,如菜单、分页按钮、APP、选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷。

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

在线演示

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

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

当使用一个SVG filter的时候,我们可以将一个操作的结构作为另一个操作的输入,从而创建出无限的动画效果。
最常见的SVG filter效果是通过来制作模糊效果。



  1.   
  2.    
  3.       
  4.    
  5.   
  6.     
  7.       
复制代码


所得到的结果如下图:


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

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


  • SourceGraphic
  • SourceAlpha
  • BackgroundImage
  • BackgroundAlpha
  • FillPaint
  • StrokePaint

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

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


  1.   
  2.   
  3.    
  4.    
  5.    
  6.   
  7.   
  8.   
  9.       
复制代码

得到的结果如下:

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

这种效果的原理是先移动元素,然后将该元素的副本进行模糊处理来制作阴影效果。通过feBlend使用in="SourceAlpha"简单的设置原始图像位于模糊图像的上面。该通道是原始图像的alpha通道,模糊后会变为黑色。

SVG Filters for HTML

在HTML元素上使用SVG Filters十分简单。可以在HTML页面中定义需要的SVG Filter,然后可以通过CSS样式表来使用它们:

  1. .filterClass {
  2.   -webkit-filter: url("#goo");
  3.   filter: url("../index.html#goo");
  4. }     
复制代码

定义一个没有-webkit-前缀的不同路径值有两个原因:一是为了使Firefox浏览器能够正确的找到该路径。二是对于相对路径,如果我们只使用#goo,它会在当前页面中查找样式表,而我们使用的是引用样式表,因此会找不到这个filter。通过设置这种设置,不论是内置样式表还是外部样式表,都可以正确的找到所需的filter。我们也可以通过JavaScript来添加filter。

  1. function setFilter(value){
  2.   $effectContainer.css({
  3.     webkitFilter: value,
  4.     filter: value,
  5.   });
  6. }   
复制代码

上面的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

应用举例

我们来看看其中的圆形菜单按钮例子的实现方法:

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

这种效果的HTML代码如下:

  1.   
  2.    
  3.       
  4.         
  5.          
  6.         
  7.         
  8.       

  9.       
  10.         
  11.          
  12.         
  13.         
  14.       

  15.       
  16.         
  17.          
  18.         
  19.         
  20.       

  21.    
  22.    
  23.       
  24.    
  25.   

  •         
    复制代码

    在HTML中定义一个内联的SVG对象:



    1.   
    2.    
    3.       
    4.       
    5.       
    6.    
    7.   
    8.   
    复制代码

    接下来使用如上面所说的CSS filter 属性来指定filter的路径和样式:


    1. .menu {
    2.   /* other styles */

    3.   -webkit-filter: url("#goo");
    4.   filter: url("../menu.html#goo");
    5. }   
    复制代码

    下面来分析一些filter,filter的第一步操作是通过feGaussianBlur来模糊对象。



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


    接下来是feColorMatrix过滤器,它在例子中的作用的增强alpha通道,于blur结合,创建更加强烈的模糊效果。


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


    Learn more about how to apply a color matrix here.

    最后,Wilder使某些元素可见,需要在模糊对象只是绘制原始的对象,为了做到这一点,我们在atop操作中使用feComposite过滤器。

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

    via:http://www.htmleaf.com/html5/SVG/201503111500.html

    Kenyataan:
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel sebelumnya:如何去设计一个自适应的网页设计或HTMl5Artikel seterusnya:JavaScript之包装对象

    Artikel berkaitan

    Lihat lagi