css动效——环绕转圈圈

效果

1、这是一个环绕转圈圈的css效果：

2、可以通过调整个数，变成任意个数，比如这样：

实现

实现效果的重点在于两个：

1、围绕中心点旋转

2、旋转的时候朝向要正确

围绕中心点旋转很好做，直接定位到中心点就可以。绕后元素做一个偏移，可以使用绝对/相对定位，或者使用内/外边距等等控制，如下：

然后增加动画效果，如下：

可以看到，这个时候的旋转朝向是错误的。

为了解决朝向问题，内层的元素需要反向运动，这就是第二点。

scss代码如下：

$ani-sum: 6;
$ani-deg: 360 / $ani-sum;
@for $i from 1 through $ani-sum {
  .ani-#{$i} {
    animation: runAni#{$i} 30s linear infinite;
    .ani-point {
      animation: runAniPoint#{$i} 30s linear infinite ;
    }
  }
  @keyframes runAni#{$i} {
    0% {
      transform: rotate(#{$i*$ani-deg}deg);
    }
    100% {
      transform: rotate(#{$i*$ani-deg+360}deg);
    }
  }
  @keyframes runAniPoint#{$i} {
    0% {
      transform: rotate(-#{$i*$ani-deg}deg);
    }
    100% {
      transform: rotate(-#{$i*$ani-deg+360}deg);
    }
  }
}

通过控制$ani-sum的数值，可以得到任意数量的动画排列。

完