Orbit animation css

<div class=”body”>
<div class=”box”>
<div class=”item”></div>
</div>
</div>

.container {
width: 100%;
height: 100vh;
border: 1px dashed red;
display: flex;
justify-content: cen…


This content originally appeared on DEV Community and was authored by Faisal Ahmed

 <div class="body">
  <div class="box">
    <div class="item"></div>
  </div>
</div> 
.container {
    width: 100%;
    height: 100vh;
    border: 1px dashed red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    width: 400px;
    height: 400px;
    border: 2px solid greenyellow;
    border-radius: 50%;
    animation: loop 5s linear infinite;
}
.item {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid yellow;
    background: goldenrod;
}

@keyframes loop {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


This content originally appeared on DEV Community and was authored by Faisal Ahmed


Print Share Comment Cite Upload Translate Updates
APA

Faisal Ahmed | Sciencx (2024-07-09T10:06:07+00:00) Orbit animation css. Retrieved from https://www.scien.cx/2024/07/09/orbit-animation-css/

MLA
" » Orbit animation css." Faisal Ahmed | Sciencx - Tuesday July 9, 2024, https://www.scien.cx/2024/07/09/orbit-animation-css/
HARVARD
Faisal Ahmed | Sciencx Tuesday July 9, 2024 » Orbit animation css., viewed ,<https://www.scien.cx/2024/07/09/orbit-animation-css/>
VANCOUVER
Faisal Ahmed | Sciencx - » Orbit animation css. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/09/orbit-animation-css/
CHICAGO
" » Orbit animation css." Faisal Ahmed | Sciencx - Accessed . https://www.scien.cx/2024/07/09/orbit-animation-css/
IEEE
" » Orbit animation css." Faisal Ahmed | Sciencx [Online]. Available: https://www.scien.cx/2024/07/09/orbit-animation-css/. [Accessed: ]
rf:citation
» Orbit animation css | Faisal Ahmed | Sciencx | https://www.scien.cx/2024/07/09/orbit-animation-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.