HTML5 button Background different animation effect design

Objective

Today to continue to introduce to you HTML5, what to say, to tell a group of effects very cool mouse-over button background animation effect, in this effect, when the mouse over the button, the use of CSS3 Animation to animate background-size and Background-position properties to achieve a variety of background animation effects.

Here's a look at the overall:

After watching the animation effect, we should be very concerned about how he achieved, and now give you a concrete talk about his implementation skills.

Implementation of the specific 1. CSS Styles

First, set a universal style for the button. Removes the button's background, sets a solid border of 2 pixels, and sets the bottom border to 4 pixels. Sets the size of the button by padding and sets the smooth animation transition for the text color of the button.

First button Background animation

In the first button background animation, the background of the button is made using 2 gradient layers. Performs a halftone frame animation when the mouse hovers over the button, which modifies the Background-size property of the button. It reduces the size of the background image so that all the dots are connected to one piece.

Second type of button background animation

In the second button background animation, a linear gradient is used as the background image of the button. When the mouse over the button, by modifying the button's Background-position property, so that the background position changes constantly, forming a zebra movement effect.

The third kind of button background animation

In the third button background animation, use the dot gradient as the background image of the button. When the mouse over the button, by modifying the button's Background-position property, so that the background position changes constantly, forming a point motion effect.

Fourth type of button background animation

The fourth kind of button background animation uses the wave to change the background image of the button. When the mouse over the button, by modifying the button's Background-position property, so that the background position changes constantly, forming a wave dynamic motion effect.

Fifth type of button background animation

The fifth button background animation uses a slash to change the background image of the button. When the mouse over the button, by modifying the button's Background-position property, so that the background position changes constantly, forming a diagonal motion effect.

Sixth type of button background animation

The sixth button background animation uses a circular flashing gradient as the background image of the button. When the mouse over the button, by modifying the button's Background-position property, so that the background position changes constantly, forming a circular flashing effect.

6 styles set up, let's look at the specifics of the HTML structure.

2. HTML structure

The button effect is made using standard components.

So we're done, now let's take a look at his static figure.

3. Interactive implementation with iOS

The code is as follows:

End

Code DOWNLOAD Link:
http://download.csdn.net/detail/baihuaxiu123/9508264

HTML5 button Background different animation effect design