DEV Community

Faisal Ahmed
Faisal Ahmed

Posted on

Orbit animation css

 <div class="body">
  <div class="box">
    <div class="item"></div>
  </div>
</div> 
Enter fullscreen mode Exit fullscreen mode
.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);
    }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay