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 which are rotating around a single point.
HTML Code: In this section, we have created a un-ordered list(ul) with list-items(li) inside it. The number of list-items is equal to the number of discs.
CSS Code: For CSS, follow the given steps.
- First thing is to create 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 frames. Here we have used 0deg for first frames and 359deg for 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.
Complete Code: It is the combination of the above two sections of code.
- How to create Glowing Star effect using HTML and CSS?
- How to create fade-in effect on page load using CSS ?
- How to Create Paradoxical Effect using CSS ?
- How to Create Liquid Filing Effect on Text using HTML and CSS ?
- How to create shock wave or explosion effect using HTML and CSS ?
- How to Create Skeleton Screen Loading Effect using CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- How to create Skewed Background with hover effect using HTML and CSS?
- How to create paper corner fold effect on hover by using HTML and CSS?
- Create a 3D Text Effect using HTML and CSS
- How to Create an Effect to Change Button Color using HTML and CSS ?
- How to create a bouncing bubble effect using CSS ?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to Create Embossed Text Effect using CSS ?
- How to create followspot effect using HTML CSS and jQuery ?
- How to Create Floating Box Effect using HTML and CSS ?
- How to Create a GrayScale Effect using CSS ?
- How to create text-reveal effect using HTML and CSS ?
- How To Create Carved Text Effect using CSS?
- How to Create Engraved Text Effect using HTML and CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.