使用css动画小球的六边形运动

使用CSS动画实现六边形运动可以通过以下步骤来实现：

1. 创建一个六边形：可以使用CSS的border属性来创建一个六边形。
2. 创建一个小球：可以使用CSS的border-radius属性来创建一个圆形。
3. 将小球放置在六边形的中心位置。
4. 创建CSS动画：可以使用@keyframes规则创建一个动画，定义小球在六边形内运动的路径。
5. 将动画应用于小球：可以使用animation属性将动画应用于小球。

以下是实现六边形运动的CSS样式代码：

.hexagon {
  width: 150px;
  height: 86.6px;
  position: relative;
  background-color: #333;
  margin: 43.3px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 43.3px solid #333;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 43.3px solid #333;
}

.ball {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 33.3px;
  left: 65px;
  border-radius: 50%;
  background-color: #fff;
  animation: moveBall 3s infinite ease-in-out;
}

@keyframes moveBall {
  from {
    transform: translateX(0) translateY(0);
  }
  
  to {
    transform: translateX(60px) translateY(50px);
  }
}

在上述代码中，我们创建了一个名为.hexagon的样式规则，用于创建一个六边形。接着，我们创建了一个名为.ball的样式规则，用于创建一个小球，并将其放置在六边形的中心位置。最后，我们创建了一个名为moveBall的CSS动画，并将其应用于小球，定义小球在六边形内运动的路径。