Article Directory
Preface
This article uses HTML+CSS to implement rotation animation on the web page. The source code and materials have all been placed in the Gitee warehouse. Friends who need the source code go to the warehouse to pick it up (the corresponding item in the warehouse in this article is named Rotate)
Warehouse address: https://gitee.com/dream-flight/repository
Tip: The following is the content of this article, the following cases are for reference
One, achieve the effect
The final display effect of the rotation animation to be achieved by the code in this article
2. Overall analysis
When implementing the rotation effect in the HTML interface, the following points must be completed: (A div is added to the body tag, the value of the class is picture, and the following operations are all operations on the picture)
1. Set the background image:
Use the background-image in the CSS property to set the background image to be rotated. At
this time, note that the image itself is square, and there is no circle defined in HTML. So when you want to modify the square image to a circle, you need to set the CSS property The border-radius, by adjusting the angle of the rounded rectangle to construct a circle.
When the value of border-radius is greater than or equal to half of the side length of the square picture, it will be displayed as a circle.
2. Set the coordinate system
The position property value in the CSS property needs to be set to relative
because animation is supported when the position property is set to relative
3. Create animation and set parameters
Use the animation property in CSS properties to create animation and set its parameters
For example: animation:run 2s linear infinite;
In this line of CSS property code, run is the name of the animation , which is defined by yourself, and 2s is the execution time, which is also defined by yourself. Linear is to solve the problem that the rotation speed is not uniform afterwards , and the effect of infinite is Let the rotation animation be executed repeatedly
4. Define the key frames of the animation
The code is as follows (example):
@keyframes run{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
The meaning of the @keyframes tag in CSS is that you can create animations , which are created by gradually changing from one CSS style to another , using% when the specified change occurs, or the keywords "from" and "to" , The keywords "from" and "to" are used here. Rotate
here is rotation , this code means that the animation name defined before is rotated from 0° to 360° (just one rotation)
Third, the implementation code
The code is as follows (example):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML实现旋转动画</title>
<style>
.picture{
width: 650px;
height: 650px;
background-image: url(./image/地球2.jpg);
border-radius: 325px;
position: relative;
animation: run 12s linear infinite;
}
@keyframes run{
from{
transform: rotate(0deg);}
to{
transform: rotate(360deg);}
}
</style>
</head>
<body>
<h2>HTML实现旋转动画</h2>
<div class="picture"></div>
</body>
</html>
Fourth, add the mouse to select the pause effect
Pause the rotation of the picture when the mouse moves to the rotating picture, just add a selector hover to the picture in the <style></style> tag, and execute the pause command when the mouse moves to the picture.
The code is as follows (example):
.picture:hover{
animation-play-state: paused;
}
play-state represents the current playback state of the animation, paused is paused
running result
The above are the knowledge points and simple cases of how to implement rotation animation in HTML pages