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

This article will explain in detail how to achieve the effect of mouse hovering in CSS3. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Method: 1, use "element: hover {animation: name time;}" to bind the animation style when the mouse hovers; 2, use "keyframes name {100% {transform:rotate (360deg);}}" to specify 360-degree rotation.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to make the effect of mouse hovering 360 degree rotation by CSS3

Step 1: use the: hover selector to set the style of the element when you hover.

A special style that hover adds when you mouse over a link

Tip: the hover selector is available for all elements, not just links.

The animation attribute can bind elements to an animation style.

Step 2: use keyframes rules and transform:rotate to set element rotation.

Using the @ keyframes rule, you can create animations.

Animations are created by gradually changing CSS style settings from one to another.

You can change the settings of the CSS style several times during animation.

The specified change occurs with%, or the keywords "from" and "to", which are the same as 0% to 100%.

Examples are as follows:

Div {width:100px; height:100px; background-color:pink;} div:hover {animation:fadenum 3s;} @ keyframes fadenum {100% {transform:rotate (360deg);}} 360 degrees

Output result:

This is the end of this article on "how to achieve the effect of mouse hovering in CSS3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.