我正在尝试让两个独立的div绕着中心以圆形运动的方式“轨道运行”,但是我在CSS动画中遇到了两个div无法沿着相同圆形路径移动的问题。
.container {
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: pink;
width: 100px;
height: 100px;
animation: battle 6s linear infinite;
position: absolute;
margin: 10px;
}
@keyframes battle {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
</div>