css小球不停跳动往右移动

CSS小球不停跳动往右移动

 
.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  animation: move 2s infinite;
}

@keyframes move {
  0% {top: 0; left: 0;}
  50% {top: 100px; left: 400px;}
  100% {top: 0; left: 800px;}
}

在这个代码中，我们定义了一个球体，它的初始位置是在左上角。接下来，我们用动画效果让球体不停地向右移动，并且在到达屏幕右侧时回到了左侧，循环不断。

首先，在.ball的样式中，我们定义了球体的高度、宽度、颜色和圆角度数，以及其初始位置相关的htnl

在动画效果中，我们使用关键帧`@keyframes` 来定义球体的运动轨迹，即初始状态、中间状态和最终状态。我们通过一系列的css属性来实现球体位置的变化，包括top、left等属性。

最后，我们将动画效果与.ball的样式关联起来，通过`animation` 属性来设置，这将使得球体按照我们所设定的轨迹进行运动。