Home > Article > Web Front-end > How to set the element to click to stop when it rotates 360 degrees in css3
How to set the element to click to stop when it rotates 360 degrees in css3
- WBOYOriginal
- 2021-12-08 17:17:234002browse
Method: 1. Use the animation attribute to bind a circular rotation animation to the element; 2. Use the @keyframes rule to set the rotation action of the animation; 3. Use "element: active{animation-play-state:paused}" When the statement sets the element to rotate in a loop, click on the element to stop the rotation.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
css3 How to set the element to click to stop when it rotates 360 degrees in a circular motion
In css, you can use the animation attribute to bind a circular rotation animation to the element ; Then use the @keyframes rule to set the rotation action of the animation.
When we play animation, if we want to pause the animation, we need to use the animation-play-state attribute. The animation-play-state attribute has two values: paused: pauses the animation; running: continues to play the animation;
We can set it through the active selector. The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s infinite;
}
@keyframes fadenum{
100%{transform:rotate(360deg);}
}
div:active{
animation-play-state:paused;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Output results :
(Learning video sharing: css video tutorial)
The above is the detailed content of How to set the element to click to stop when it rotates 360 degrees in css3. For more information, please follow other related articles on the PHP Chinese website!