css物体循环左右运动 |css旋转中心点

.box {
position: relative;
animation: loop 2s infinite;
}
@keyframes loop {
0% {
left: 0px;
}
50% {
left: 200px;
}
100% {
left: 0px;
}
}

上述代码中，大家定义了一个class名为box的元素，给它设置了相对定位。然后通过animation属性来指定动画效果，指定了一个名为loop的动画，时长为2秒，并且让它永远循环播放。

接下来是关键的动画定义，大家使用@keyframes关键字来定义一个名为loop的动画。在0%的时候，设置元素的左边距为0px，在50%的时候设置为200px，在100%的时候再设置为0px，这样就可以让元素循环向左右移动了。

可以根据需要调整动画的时长和运动效果，此外还可以配合其他CSS属性来实现更加丰富的效果，比如改变元素的透明度、旋转角度等等。这里只是简单演示了一个物体循环左右运动的例子，希望对大家有所帮助。