Rotate Small Circle Inside Big Path Circle CSS Infinity
In this blog, we will be creating a visually appealing animation of a small circle rotating inside a big path circle. The final result will be a beautiful blue background with a large white circle that has a smaller circle rotating inside it. The smaller circle will be blue, which will provide a contrast to the white path circle. The animation is done using CSS and HTML.
Let’s start by looking at the HTML structure of the animation. The structure is simple and easy to understand. We have a body section that contains a div with a class named “container.” The “container” class contains two more divs, one with a class named “path,” and the other with a class named “circle.” The “path” div is responsible for creating the big path circle, and the “circle” div creates the smaller circle.
Next, let’s take a look at the CSS code. In the CSS, we set the margin, padding, and box-sizing to 0. The section is then center on the page, and the background color is use to blue. The “container” class is then given a width and height, and it is position relative. The “path” class is given a width and height, and the border radius is use to 50%. The “circle” class is given a width, height, and background color. It is then positioned absolute, and its top position is set to 50%. The “circle” div is then transformed, so it’s centered vertically, and the animation is added to it.
Finally, the animation is add using the “@keyframes” CSS property. The animation rotates the circle from 0 degrees to 360 degrees, creating a full rotation. The animation takes 5 seconds to complete, and it runs continuously.
Video Tutorial of Rotate Small Circle Inside Big Path Circle
To see a live demonstration of the Rotate Small Circle, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Rotate Small Circle Inside Big Path Circle
HTML:
Create a new file with the name “index.html
” and add the provided code to it. Ensure the file has a “.html
” extension.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Rotate Small Circle Inside Big Path Circle</title> </head> <body> <section> <div class="container"> <div class="path"></div> <div class="circle"></div> </div> </section> </body> </html>
This is an HTML code for a simple web page with a rotating circle inside a path circle. The page is use with a title, “Rotate Small Circle Inside Big Path Circle” and has a link to a CSS file, “style.css,” which is use to style the page. The body of the page contains a section with a single container div that holds the path circle and the rotating circle. The container div is use to be center both horizontally and vertically on the page. The path circle and the rotating circle are create with div elements and are style in the attached CSS file.
CSS:
Create a new CSS file name “style.css
” and copy the provide code into it. Ensure that the file has a “.css
” extension.
* { margin: 0; padding: 0; box-sizing: border-box; } section { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #0096c7; } .container { position: relative; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; } .container .path { position: relative; width: 200px; height: 200px; border-radius: 50%; border: 40px solid #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.5); } .container .circle { position: absolute; left: 0; top: 50%; width: 40px; height: 40px; background: #0096c7; border-radius: 50%; transform: translateY(-50%); transform-origin: 100px 50%; animation: dotcircle 5s linear infinite; } @keyframes dotcircle { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } }
This CSS code is for styling a web page with a rotating circle inside a path circle. The first block use some default styles for the page, including removing all margins, padding, and making sure that the box-sizing is use to border-box. The section is then style with a blue background and is center both horizontally and vertically. The container for the circles is also center and has a width and height of 200px. The path circle is use with a white border and a shadow effect. The rotating circle is use with a blue background, a border-radius of 50% to make it circular, and a transform property to position it inside the path circle. The animation property sets the rotation of the circle to rotate 360 degrees over 5 seconds in a linear manner and to repeat continuously.
Summary:
This code is for a web page that displays a big path circle with a small circle inside that rotates continuously. The page is built with HTML and CSS. The HTML structure consists of a section with a container that has two divs, one for the path circle and one for the rotating circle. The CSS styles the page and positions the circles. The small circle has an animation applied to it that rotates it 360 degrees over a 5 second period.