Open In App

How to create rotating disc effect using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 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;
}


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
Previous
Next
Share your thoughts in the comments
Similar Reads