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
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
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/
" » Orbit animation css." Faisal Ahmed | Sciencx - Tuesday July 9, 2024, https://www.scien.cx/2024/07/09/orbit-animation-css/
HARVARDFaisal Ahmed | Sciencx Tuesday July 9, 2024 » Orbit animation css., viewed ,<https://www.scien.cx/2024/07/09/orbit-animation-css/>
VANCOUVERFaisal 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.