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

This article mainly introduces the relevant knowledge of "how css3 makes a picture rotate all the time". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how css3 makes a picture rotate all the time" can help you solve the problem.

Methods: 1, use "img {animation: name time infinite}" statement to bind animation to the picture; 2, use "@ keyframes name {100% {transform:rotate (rotation angle)}}" statement to set the animation rotation action to achieve the picture rotation effect all the time.

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

How does css3 make a picture rotate all the time?

In css, you can use the animation attribute to make an element binding animation. The animation attribute can control the duration and frequency of the animation. The syntax is as follows:

Animation: name duration timing-function delay iteration-count direction

Where the attribute value iteration-count defines how many times the animation should be played. When set to infinite, the animation plays all the time.

Then use the @ keyframes rule with transform:rotate to set the animated rotation action.

Examples are as follows:

Document img {width:100px; height:100px; animation:fadenum 5s infinite;} @ keyframes fadenum {100% {transform:rotate (360deg);}}

Output result:

This is the end of the introduction to "how css3 makes a picture rotate all the time". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.