Use css pseudo-classes to achieve mouse-over button animation effects-CSS Tutorial-php.cn

The

Use css pseudo-classes to achieve mouse-over button animation effects

button is a very common function for developers. The front end usually adds some operation interaction styles to buttons to increase some user experience.

For example: hover style, click style, loading style, etc. Let's learn about css3 animation and css pseudo-classes through simple examples.

Example 1

Copy after login

Use css pseudo-classes to achieve mouse-over button animation effects

Analysis:

1. Use pseudo-class as mouse: after hover event, For the background of the button, relative positioning (relative) and absolute positioning (absolute) are used here

Remember: when using absolutely positioned elements, the parent element must use relative positioning, otherwise the element will keep looking upwards for the relatively positioned element. , until the root node.

2. Here, transition is used to describe the :hover event animation. The animation is completed in 0.3s and the transparency of :after is changed. all is all behavior.

Of course, we have a simpler implementation here. It is ok to directly change the background without using a type. Please see the code:

Copy after login

ok. Based on Example 1, we will add Further, please see Example 2

Example 2

Copy after login

Use css pseudo-classes to achieve mouse-over button animation effects

## Analysis:

1, here and Example 1 It's actually similar, but here we change the width of the pseudo class.

2. By analogy, we can change the height of the pseudo class and see the downward expansion animation.

Copy after login

Use css pseudo-classes to achieve mouse-over button animation effects

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of Use css pseudo-classes to achieve mouse-over button animation effects. For more information, please follow other related articles on the PHP Chinese website!