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

Editor to share with you how css3 sets the elements to rotate in a 360-degree cycle and click stop. I hope you will get something after reading this article. Let's discuss it together.

Methods: 1, use the animation attribute to bind the element cycle rotation animation; 2, use the @ keyframes rule to set the animation rotation action; 3, use the "element: active {animation-play-state:paused}" statement to set the element cycle rotation, click the element to stop rotation.

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

In css, you can use the animation attribute to animate the loop rotation of an element, and then use the @ keyframes rule to animate the rotation action.

When we play the animation, if we want to pause the animation, we need to use the property animation-play-state. The animation-play-state property has two values: paused: pause the animation; running: continue to play the animation

We can set it through the active selector. The example is as follows:

Document div {width:100px; height:100px; background-color:pink; animation:fadenum 5s infinite;} @ keyframes fadenum {100% {transform:rotate (360deg);}} div:active {animation-play-state:paused;}

Output result:

After reading this article, I believe you have a certain understanding of "how to set the element to click stop when rotating in a 360-degree cycle". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

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.