How to realize the effect of mouse moving up and unrotating by css

This article will introduce in detail for you "css how to achieve the mouse to rotate the effect", the content steps are clear and detailed, the details are handled properly, and the editor will update different knowledge points every day, hope that this article "css how to achieve the effect of mouse movement to rotate" can give you unexpected gains, please follow the editor's ideas slowly in depth, the specific content is as follows, to harvest new knowledge.

Method: 1, use @ keyframes animation name {100% {transform:rotate (angle)} "to create rotation animation; 2, use" element: hover {animation: animation name time linear infinite} "to trigger the animation when the mouse moves over the element.

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

Css realizes the effect of mouse moving up and unrotating.

The rotation effect can be animated using the animation property and the "@ keyframes" rule.

While the mouse over the element, trigger rotation animation need to use: hover selector. The hover selector is used to select the element over which the mouse pointer floats and to set the style. )

Implementation code:

Div {width: 100px; height: 100px; background-color: red; margin: 50px auto } div:hover {animation: mymove 1s linear infinite;} @ keyframes mymove {100% {transform: rotate (360deg) } @-webkit-keyframes mymove {/ * Safari and Chrome * / 100% {transform: rotate (360deg) }}

What is the full name of css? the full name of css is Cascading Style Sheets (cascading style sheets), a computer language used to express file styles such as HTML or XML. CSS can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages.

Thank you for reading this. The editor hopes that you have the most profound experience from the practical level on the key issue of "how to move the mouse up and rotate the effect of css". The specific use also requires everyone to practice and use it before you can understand it. If you want to read more related articles, welcome to follow the industry information channel!