7 cool HTML5SVG liquid water drop fusion animation effects-

This is a set of animation effects that use the HTML5SVG filter to merge cool liquid water drops. These SVG animation effects make the transition animations of Some HTML elements, such as menus, paging buttons, apps, and selection boxes, break down like a few drops of water. The effect is cool. Online demonstration of SVGFilter ...,. This is a set of animation effects that use HTML5 SVG filters to combine the cool liquid water drops. These SVG animation effects make the transition animations of Some HTML elements, such as menus, paging buttons, apps, and selection boxes, break down like a few drops of water. The effect is cool.

Online Demo

7 types of cool HTML5 svgliquid-water integration and animation special effects. Zip

SVG Filters


With SVG Filters, we can modify a given image and create the desired result. SVG contains a filter element that can perform various operations. The following lists some available SVG filter elements:

• FeBlend
• FeColorMatrix
• FeComponentTransfer
• FeComposite
• FeConvolveMatrix
• FeDiffuseLighting
• FeDisplacementMap
• FeFlood
• FeGaussianBlur
• FeImage
• FeMerge
• FeMorphology
• FeOffset
• FeSpecularLighting
• FeTile
• FeTurbulence
• FeDistantLight
• FePointLight
• FeSpotLight
  

When using an SVG filter, we can use the structure of one operation as the input of another operation to create an infinite animation effect.
The most common SVG filter effect is through To make the blur effect.

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

The result is as follows:

The in attribute of an element is used to define the original SVG input. You can use the following keywords:

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

Here we can also use a string that refers to the execution result of the previous one. Through the execution result string, we can create continuous animation effects. This method is used in animation effects of liquid water drops.

A more complex example is to combine multiple SVG filters to create the desired effect, such as drop shadow:

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

The result is as follows:

The principle of this effect is to first move the element, and then blur the copy of the element to make the shadow effect. Use feBlend to use in = "SourceAlpha" to easily set the original image to be located on the top of the blurred image. This channel is the alpha channel of the original image. After being blurred, it turns black.

SVG Filters for HTML

It is very easy to use SVG Filters on HTML elements. You can define the required SVG Filter on the HTML page, and then use them through the CSS style sheet:

1. . FilterClass {
   
2. -Webkit-filter: url ("# goo ");
   
3. Filter: url ("../index.html # goo ");
   
4. }

There are two reasons for defining a different path value without the-webkit-Prefix: one is to make the Firefox browser find the path correctly. Second, for the relative path, if we only use # goo, it will find the style table on the current page, and we use the reference style table, so this filter will not be found. By setting this setting, you can find the required filter correctly, whether it is a built-in style sheet or an external style sheet. We can also use JavaScript to add a filter.

1. Function setFilter (value ){
   
2. $EffectContainer.css ({
   
3. WebkitFilter: value,
   
4. Filter: value,
   
5. });
   
6. }

The value above is similar to 'url (# goo )'.

The current browser provides excellent support for using SVG Filters on HTML elements.

The following are some good materials for learning SVG Filters. For more information, see:

• 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

Application Example

Let's take a look at the implementation method of the circular menu button example:

The HTML code for this effect is as follows:

1. 
   

2. 
   

3. 
   
   • 
     
   • 
     
   • 
     
   • 
     

   • 
     
   
   
   • 
     
   • 
     
   • 
     
   • 
     

   • 
     
   
   
   • 
     
   • 
     
   • 
     
   • 
     

   • 
     
   
   
   
   
4. 
   
5. 
   
6. 
   

7. 
   

Define an inline SVG object in HTML:

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

Next we will use the CSS filter attribute mentioned above to specify the path and style of the filter:

1. . Menu {
   
2. /* Other styles */
   
3. 
   
4. -Webkit-filter: url ("# goo ");
   
5. Filter: url ("../menu.html # goo ");
   
6. }

Next we will analyze some filters. The first step of the filter operation is to use feGaussianBlur to blur objects.

The next step is the feColorMatrix filter, which is used to enhance the alpha channel in the example. It is combined with blur to create more intense fuzzy effects.

Learn more about how to apply a color matrix here.

Finally, Wilder makes some elements visible. It is necessary to draw the original object in the fuzzy object. To do this, we use the feComposite filter in the atop operation.

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