操场形状改成这样 CSS3的动画怎么沿着他运动

你可以使用 CSS3 的 `animation` 属性来实现动画效果。具体步骤如下：

1. 首先，将操场的形状修改为你想要的形状，例如一个梯形。
2. 接着，使用 CSS3 的 `animation` 属性设置动画效果。例如，你可以设置 `animation-duration` 属性来控制动画的持续时间，设置 `animation-iteration-count` 属性来控制动画的循环次数，设置 `animation-direction` 属性来控制动画的方向等。
3. 最后，使用 CSS3 的 `@keyframes` 规则来定义动画的具体变化过程。例如，你可以使用 `transform` 属性来实现操场沿着运动轨迹运动的效果。

下面是一个示例代码，可以让操场沿着一个曲线运动：

.playground {
  width: 500px;
  height: 300px;
  border-top: 150px solid #f00;
  border-left: 50px solid transparent;
  border-right: 250px solid transparent;
  border-bottom: 150px solid #f00;
  position: relative;
  animation-name: move;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(300px) translateY(150px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

这个代码会让操场沿着一个曲线运动，持续时间为 5 秒，循环次数为无限次，方向为来回循环。你可以根据需要进行修改。