Home > Article > Web Front-end > What is the css3 code for mouse over rotated element
What is the css3 code for mouse over rotated element
- WBOYOriginal
- 2022-03-22 12:17:291911browse
The code is "Element:hover{animation:name time}@keyframes name{100%{transform:rotate(rotation angle);}}"; the hover selector sets the style of the mouse passing through, animation and @keyframes Animate elements.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What is the css3 code for a rotated element when the mouse passes over it?
:Hover is a special style added when the mouse moves over a link.
:hover selector can be used on all elements, not just links.
You can use the animation attribute to bind animation to an element. The animation attribute can control the duration and number of animations. The syntax is:
animation: name duration timing-function delay iteration-count direction;
The value setting of the attribute When it is "infinite", it stipulates that the animation is played infinitely. When we bind a rotation animation to the element, it can continue to rotate.
Then set the rotation action of the animation through @keyframes rules.
The example is as follows:
<html>
<head>
<style>
div{
width:100px;
height:100px;
background-color:pink;
}
div:hover{animation:fadenum 5s;}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output result:
css video tutorial）
The above is the detailed content of What is the css3 code for mouse over rotated element. For more information, please follow other related articles on the PHP Chinese website!