How to create rotating disc effect using CSS ?
The Rotating Disc Effect also known as Overlapping Disc Effect is a type of illusion effect that can be used for various purposes on a website. It can be used in anything from a loader sticker to creating an illusion for the user. It is called overlapped disc because there are many overlapped discs that are rotating around a single point.
Approach: The approach is to create all the discs first and then use keyframes and n-th child properties to rotate them.
HTML Code: In this section, we have created an un-ordered list(ul) with list-items(li) inside it. The number of list-items is equal to the number of discs.
Example: Here we are implementing the above explained approach.
html
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0" />
< title >Rotating Disc Effect</ title >
</ head >
< body >
< ul >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
</ ul >
</ body >
</ html >
|
CSS Code: For CSS, follow the given steps.
- The first thing is to create a disc by using the border-radius property. Set the border-radius to 50% to create a perfect circle.
- Now, use animation with an identifier to be used later with keyframes. We have used animate as our identifier.
- Now, use keyframes to rotate the disc for each frame. Here we have used 0deg for the first frames and 359deg for the second frame.
- Now, use n-th child property to apply a delay of 1st to each disc. It helps to rotate each disc with some delay that is responsible for the illusion kind of effect.
Tip: You can apply different opacity colors to each disc to make it look more appealing.
CSS
ul {
margin : 0 ;
padding : 0 ;
position : absolute ;
left : 40% ;
top : 20% ;
}
ul li {
list-style : none ;
width : 200px ;
height : 200px ;
position : absolute ;
top : 0 ;
border-radius: 50% ;
box-shadow: 0 0 5px rgba( 0 , 0 , 0 , 0.5 );
animation: animate 7 s linear infinite;
transform-origin: bottom center ;
}
@keyframes animate {
0% {
transform: rotate( 0 deg);
}
100% {
transform: rotate( 359 deg);
}
}
ul li:nth-child( 1 ) {
animation-delay: 0 s;
}
ul li:nth-child( 2 ) {
animation-delay: 1 s;
}
ul li:nth-child( 3 ) {
animation-delay: 2 s;
}
ul li:nth-child( 4 ) {
animation-delay: 3 s;
}
ul li:nth-child( 5 ) {
animation-delay: 4 s;
}
ul li:nth-child( 6 ) {
animation-delay: 5 s;
}
ul li:nth-child( 7 ) {
animation-delay: 6 s;
}
ul li:nth-child( 7 ) {
animation-delay: 7 s;
}
|
Complete Code: It is the combination of the above two sections of code.
html
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0" />
< title >Rotating Disc Effect</ title >
< style >
ul {
margin: 0;
padding: 0;
position: absolute;
left: 40%;
top: 20%;
}
ul li {
list-style: none;
width: 200px;
height: 200px;
position: absolute;
top: 0;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
animation: animate 7s linear infinite;
transform-origin: bottom center;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
ul li:nth-child(1) {
animation-delay: 0s;
}
ul li:nth-child(2) {
animation-delay: 1s;
}
ul li:nth-child(3) {
animation-delay: 2s;
}
ul li:nth-child(4) {
animation-delay: 3s;
}
ul li:nth-child(5) {
animation-delay: 4s;
}
ul li:nth-child(6) {
animation-delay: 5s;
}
ul li:nth-child(7) {
animation-delay: 6s;
}
ul li:nth-child(7) {
animation-delay: 7s;
}
</ style >
</ head >
< body >
< ul >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
</ ul >
</ body >
</ html >
|
Output:
Last Updated :
08 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...