css3 实现元素弧线运动的示例代码

实现元素弧线运动的示例代码需要使用到 CSS3 的 animation 和 transform 属性，下面是实现步骤：

实现元素弧线运动的示例代码需要使用到 CSS3 的 animation 和 transform 属性，下面是实现步骤：

1. 确定元素

首先需要确定需要进行弧线运动的元素，例如这里选择使用 div 元素作为样例：

<div class="arc"></div>

2. 定义样式

接下来需要定义元素的样式，可以将该元素定义为一个圆形或任何其他形状。此外，还需要定义元素的初始位置和动画的关键帧：

/* 定义圆形 */
.arc {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  animation: arc 3s linear infinite forwards;
}

/* 定义运动关键帧 */
@keyframes arc {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(400px, 400px) rotate(720deg);
  }
}

3. 运行效果

在上面的代码中，我们定义了一个名为 arc 的 div 元素，将其样式定义为圆形，初始位置为页面的左上角。接着，我们使用 animation 属性来指定动画的名称、时长、缓动函数以及循环次数。

这里的关键帧使用 from 和 to 来指定动画的起始位置和终止位置，其中 translate 函数用于移动元素，rotate 函数用于使元素绕着圆心旋转。

最后，运行效果可以参考以下两个示例：

示例 1：元素在正方形上运动

元素从正方形的左上角出发，绕正方形的四个顶点运动，最终回到原点。

/* 定义正方形 */
.square {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 关键帧 */
@keyframes arc {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100%, 0);
  }
  50% {
    transform: translate(100%, 100%);
  }
  75% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}

示例 2：元素在椭圆上运动

元素从圆心出发，绕椭圆的长轴和短轴逆时针方向旋转运动，最终回到原点。

/* 定义椭圆形 */
.ellipse {
  width: 200px;
  height: 500px;
  border-radius: 50% / 100%;
  border: 2px solid black;
  position: relative;
  margin: 0 auto;
}

/* 定义元素 */
.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  animation: arc 3s linear infinite;
}

/* 关键帧 */
@keyframes arc {
  from {
    transform: rotate(0deg) translate(0, -100%);
  }
  to {
    transform: rotate(360deg) translate(0, -100%);
  }
}

上述两个示例都可以通过简单调整变量来实现不同的弧线运动效果。