How to create rotating disc effect using CSS?

Last Updated : 24 Jul, 2024

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.

<!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.

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.

<!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>