TEST
by wllai2001
HTML
<div class="circle">A</div>
<div class="circle circle2">B</div>
CSS
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #3498db;
animation: rotate 4s linear infinite;
}
.circle2 {
animation: rotate 4s linear infinite reverse;
}