recherche

Maison >interface Web >Tutoriel H5 >7种炫酷HTML5 SVG液态水滴融合动画特效

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

WBOY
WBOYoriginal
2016-05-17 09:07:462169parcourir
这是一组使用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效果是通过来制作模糊效果。



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


所得到的结果如下图：


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

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


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

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

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


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

得到的结果如下：

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代码如下：


  2.   

  3.    

  4.       

  6.         
  7.          
  8.         
  9.         

  10.       

  11.       

  13.         
  14.          
  15.         
  16.         

  17.       

  18.       

  20.         
  21.          
  22.         
  23.         

  24.       

  25.    
  26.    
  27.       
  28.    
  29.   
    •         
    复制代码

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



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

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


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

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

    下面来分析一些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

    Déclaration：
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent：如何去设计一个自适应的网页设计或HTMl5Article suivant：JavaScript之包装对象

    Articles Liés

    Voir plus