html 圆形轨迹,CSS组合动画实现弧形轨迹_html/css_WEB-ITnose

要实现一个圆形轨迹，可以使用CSS的transform属性来旋转元素。具体实现步骤如下：

1. 创建一个div元素，设置宽度和高度相等，且为圆形。

<div class="circle"></div>

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

2. 使用CSS的animation属性来定义动画，使元素绕圆心旋转。需要设置动画循环次数为无限循环，并指定动画时间和旋转方式（linear 或 ease-in-out）。

.circle {
  animation: spin 5s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

3. 如果要实现弧形轨迹，可以使用CSS的translateX和translateY属性来移动元素的位置。设置元素的初始位置为圆心，然后在动画中使用translateX和translateY属性来移动元素。

例如，要实现元素在圆形轨迹上向右上移动的效果，可以将元素的初始位置设置为圆心，然后在动画的25%处向右上移动50px，再在动画的50%处向下移动50px，最后在动画的75%处向左下移动50px。

.circle {
  animation: arc 5s ease-in-out infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes arc {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50px, -50px) rotate(90deg);
  }
  50% {
    transform: translate(-50px, 50px) rotate(180deg);
  }
  75% {
    transform: translate(50px, 50px) rotate(270deg);
  }
  100% {
    transform: translate(50px, -50px) rotate(360deg);
  }
}

通过类似的方式，可以实现元素在圆形轨迹上任意方向移动的效果。