Shulou(Shulou.com)06/03 Report--

I would like to share with you how HTML5 designs different animations for the background of the button. I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it together.

How to skillfully use HTML5 to design different button background animation effects, in this special effect, when the mouse over the button, use CSS3 animation to animate background-size and background-position properties to achieve a variety of background animation effects.

Let's take a look at the overall effect:

Specific implementation:

1. CSS style

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

The first button background animation:

In the first button background animation, the background of the button is made using two gradient layers. Performs a halftone frame animation when the mouse is over the button, which modifies the button's background-size property. It reduces the size of the background picture so that all the dots are connected.

The second button background animation:

In the second kind of button background animation, a linear gradient is used as the background image of the button. When the mouse is over the button, the background-position property of the button is modified to make the background position change constantly, resulting in the movement effect of zebra crossing.

The third button background animation:

In the third kind of button background animation, the flower dot gradient is used as the background image of the button. When the mouse is over the button, the background-position property of the button is modified to make the background position change constantly, forming a point motion effect.

The fourth button background animation:

In the fourth kind of button background animation, wave deformation is used as the background image of the button. When the mouse slides over the button, the background-position property of the button is modified to make the background position change constantly and form the effect of wave dynamic motion.

The fifth button background animation:

In the fifth button background animation, the slash is used as the background image of the button. When the mouse is over the button, the background-position property of the button is modified to make the background position change constantly and form the effect of diagonal movement.

The sixth button background animation:

In the sixth kind of button background animation, a circular flash gradient is used as the background image of the button. When the mouse is over the button, the background-position property of the button is modified to make the background position change constantly, forming a circular flashing effect.

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

The above is all the content of the article "how HTML5 designs different animations for the background of buttons". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.