Pure HTML5+CSS3 Making picture rotation

This article mainly introduces the pure HTML5+CSS3 production picture rotation, HTML5 combined with CSS3 to achieve some of the animation effects, the implementation is relatively easy, interested in the small partners can refer to

This example can be applied to many projects, very practical, I hope you can master.

As follows:

This effect is not really difficult to implement, the code listing is as follows:

xml/html Code copy content to clipboard

<!     DOCTYPE html>
1. The p with the ID Liu is the area to display the picture, but the picture here is the background image to use, and the rounded angle is used to achieve the circular effect.
2. The key part of the code is how to make the picture rotate infinitely. We can use the combination of-webkit-animation and @-webkit-keyframes to do it.

-webkit-animation is a composite property that is defined as follows:

-webkit-animation:name Duration timing-function delay iteration_count direction;

Name: Is the method that needs to be specified in @-webkit-keyframes to perform the animation.

Duration: The length of time the animation is executed in a cycle.

Timing-function: The effect of animation execution can be linear, or it can be "fast into slow speed out" and so on.

Delay: The duration of the animation delay execution.

Iteration_count: The number of times the animation loop executes, and if it is infinite, it executes indefinitely.

Direction: Animation execution direction.

3. The From and to two properties in @-webkit-keyframes specify the initial and end values for the animation execution.

4.-webkit-animation-play-state:paused; Pauses the execution of the animation.

The above is the whole content of this article, I hope to realize the image of the rotation effect of the help.