This content originally appeared on DEV Community and was authored by mpoiiii
The overall effect is shown below:
Alright, let's walk through the steps to create this animation using CSS.
In this tutorial, we will guide you step-by-step on how to create a rotating trailing effect using CSS. We will achieve this by setting the width, height, border radius, background color, and multiple shadows for an element.
Step 1: Setting Up the HTML Structure
First, we need to define the HTML hierarchy and structure.
The entire screen consists of three parts: first, the black background (.container), then the arc (.circle), and finally the small dot at the end of the arc (.dot).
The overall HTML structure is shown below.
<div class="container">
<div class="circle">
<div class="dot"></div>
</div>
</div>
CSS Composition
1. Setting Background and Content Position
First, we set the black background of the page by directly modifying the
part of the HTML.body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
By setting height: 100vh;, we ensure that the
Then, we set the size of the content.
.container {
background-color: transparent;
width: 200px;
height: 200px;
}
2. Drawing the Arc and Rotating It
The first step is to form an arc, which is actually a part of a circle. Therefore, we need to draw the entire circle first.
Start by drawing a square, and the size of this square is the content size we set earlier with a side length of 200px.
.container .circle {
border-color: yellow;
border-style: solid;
width: 100%;
height: 100%;
}
Next, we use border-radius to turn the square into a circle.
.container .circle {
border-color: yellow;
border-style: solid;
width: 100%;
height: 100%;
/* new */
border-radius: 50%;
}
Then, we just need to clip a part of the circle to make it look like an arc.
.container .circle {
border-style: solid;
width: 100%;
height: 100%;
border-radius: 50%;
/* new */
border-color: yellow transparent transparent yellow;
border-width: 3px 3px 0 0;
}
Now that the arc and the endpoint of the arc are generated, we just need to start rotating the arc.
Define a CSS animation keyframe (@keyframes) that specifies an animation sequence called animate.
In this animation sequence, the element will rotate one full turn (1turn is 360 degrees) from its initial state (usually from {}, but here it defaults to the current state).
@keyframes animate {
to {
transform: rotate(1turn);
}
}
Then, apply the animation keyframe to the .circle class.
.container .circle {
border-style: solid;
width: 100%;
height: 100%;
border-radius: 50%;
border-color: yellow transparent transparent yellow;
border-width: 3px 3px 0 0;
/* new */
animation: animate 3s linear infinite;
}
-
animation: This is the shorthand property for animations, which can combine multiple values such as animation name, duration, timing function, loop count, etc. -
animate: This is the name of the animation, corresponding to the@keyframes animatedefinition. -
3s: The duration of the animation, meaning it takes 3 seconds to complete one cycle. -
linear: The timing function for the animation, indicating that it proceeds at a constant speed with no acceleration or deceleration. -
infinite: The loop count, meaning the animation will repeat indefinitely.
Once set, the animation effect will appear as shown below:
Next, we can add a small dot to the rotating head to enhance the animation effect.
.container .circle .dot {
width: 10px; /* Element width is 10 pixels */
height: 10px; /* Element height is 10 pixels */
border-radius: 50%; /* Border radius is 50%, making the element a circle */
margin-left: 85%; /* Left margin is 85% of the parent element's width */
margin-top: 13%; /* Top margin is 13% of the parent element's height */
background-color: yellow; /* Background color is yellow */
box-shadow: /* Define a series of shadow effects */
0 0 2em, /* The first shadow, distance 0, blur radius 0, spread radius 2em */
0 0 4em, /* The second shadow, distance 0, blur radius 0, spread radius 4em */
0 0 6em, /* The third shadow, distance 0, blur radius 0, spread radius 6em */
0 0 8em, /* The fourth shadow, distance 0, blur radius 0, spread radius 8em */
0 0 10em, /* The fifth shadow, distance 0, blur radius 0, spread radius 10em */
0 0 0 0.5em rgba(255, 255, 0, 0.2);/* The final shadow, distance 0, spread 0.5em, yellow with transparency */
}
This is the final result:
This content originally appeared on DEV Community and was authored by mpoiiii
mpoiiii | Sciencx (2024-10-29T07:06:09+00:00) How to Create a Rotating Trailing Effect with CSS. Retrieved from https://www.scien.cx/2024/10/29/how-to-create-a-rotating-trailing-effect-with-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.