How to achieve circular rotation effect in css3-Front-end Q&A-php.cn

How to achieve circular rotation effect in css3

WBOY

Release： 2022-03-22 12:17:19

Original

3012 people have browsed it

Method: 1. Use "border-radius:100%" to set the element to be circular; 2. Use "@keyframes name {100%{transform:rotate(360deg);}}" to set animation; 3. , use "animation: name time" to bind animation effects to elements.

How to achieve circular rotation effect in css3

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

How to achieve circular rotation effect in css3

border-radius allows you to set the rounded corners of the outer border of an element. Determines a circle when using one radius and an ellipse when using two radii. The intersection of this (oval) circle and the border creates a rounded corner effect.

Using @keyframes rules, you can create animations.

Create animations by gradually changing from one CSS style setting to another.

You can change the CSS style settings multiple times during the animation process.

Specify when the change occurs using %, or the keywords "from" and "to", which are the same as 0% to 100%.

0% is when the animation starts, 100% is when the animation is completed.

For best browser support you should always define selectors for 0% and 100%.

The syntax is:

@keyframes animationname {keyframes-selector {css-styles;}}

Copy after login

The animation attribute syntax is:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Copy after login

animation-name Specifies the name of the keyframe to be bound to the selector
animation-duration The animation specifies how many seconds or milliseconds it takes to complete
animation-timing-function Sets how the animation will complete a cycle
animation-delay sets the delay interval before the animation starts.
animation-iteration-count Defines the number of times the animation is played.
animation-direction Specifies whether the animation should be played in reverse in turn.
animation-fill-mode specifies the style to be applied to the element when the animation is not playing (when the animation is completed, or when there is a delay before the animation starts playing).
animation-play-state Specifies whether the animation is running or paused.

The example is as follows:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
#example1
{
background:#dddddd;
width:100px;
height:100px;
border-radius:100%;
text-align:center;
animation:fadenum 5s;
}
@keyframes fadenum{
   100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div id="example1">
  这是一个圆
</div>
<br><br>
</body>
</html>

Copy after login

Output result:

How to achieve circular rotation effect in css3

(Learning video sharing: css video Tutorial)

The above is the detailed content of How to achieve circular rotation effect in css3. For more information, please follow other related articles on the PHP Chinese website!