Use HTML5 to design different animations for the button background,

Use HTML5 to design different animations for the button background,

How to Use HTML5 to design different animation effects on the button background? In this special effect, when the mouse slides over the button, CSS3 animation is used to animation the background-size and background-position attributes, to achieve a variety of background animation effects.

Let's take a look at the overall situation:

 

Specific implementation:

1. CSS style

First, set a general style for the button. Remove the background of the button, set the solid border of 2 pixels, and set the bottom border to 4 pixels. Use padding to set the button size and set the smooth animation transition effect for the text color of the button.

The first button background animation:

In the first type of Button background animation, two gradient layers are used to create the button background. When the mouse slides over the button, the halftone Frame Animation is executed. The animation modifies the background-size attribute of the button. It reduces the size of the background image and connects all the dots.

Second, button background animation:

In the second type of Button background animation, linear gradient is used as the background image of the button. When you move the mouse over a button, you can modify the background-position attribute of the button to change the background position to form a zebra movement effect..

 

Third button background animation:

In the third type of Button background animation, use a gradient as the background image of the button. When you move the mouse over a button, you can modify the background-position attribute of the button to change the background position to form a point motion effect.

Fourth button background animation:

In the fourth type of Button background animation, The Tilde is used as the background image of the button. When you move the mouse over a button, you can modify the background-position attribute of the button to change the background position to form a wave motion.

5. Button background animation:

In the fifth type of Button background animation, a diagonal line is used as the background image of the button. When you move the mouse over a button, you can modify the background-position attribute of the button to change the background position to form a diagonal line.

6. Button background animation:

In the sixth type of Button background animation, a circular flashing gradient is used as the background image of the button. When you move the mouse over a button, you can modify the background-position attribute of the button to change the background position to generate a circular flashing effect.

This is the effect and code of each of the six buttons. In addition to this css style, you can also use some standard components to make it.