[分享]css3按照弧形移动

CSS3可以通过transform属性，实现元素按照弧形移动的效果。这种效果可以让网页更加生动有趣，同时也可以增加用户体验。/ 设置圆形路径 / .path { width: 300px; heigh...

CSS3可以通过transform属性，实现元素按照弧形移动的效果。这种效果可以让网页更加生动有趣，同时也可以增加用户体验。

/* 设置圆形路径 */
.path {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid #ccc;
  position: relative;
}

/* 设置需要移动的图片 */
.img {
  width: 50px;
  height: 50px;
  background-color: #f00;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, -50%);
  animation: move 5s linear infinite;
}

/* 定义动画 */
@keyframes move {
  0% {
    transform: translate(0, -50%) rotate(0deg);
  }
  100% {
    transform: translate(0, -50%) rotate(360deg);
  }
} 

以上代码中，首先定义了一个具有圆形路径的div，设为path类。然后在这个div中放入需要移动的图片，设为img类。设置img的top和left属性为0，让其一开始在圆形路径的起点位置。

接着定义动画，使用@keyframes关键字和move动画名称。在0%和100%两个时间点的状态不同，0%的状态是起点，即img位于圆形路径最左侧，rotate(0deg)表示不旋转；100%的状态是终点，即img绕圆形路径旋转360度，达到“沿弧形路径移动”的效果。动画时长设为5秒，线性运动。

最后，在img类中添加animation属性，将动画绑定到img元素上。启动后，img将循环执行move动画，按照圆形路径沿弧形移动。