css3围绕原点转圈的动画

Question

希望这个黑线能围绕里头的圆无线循环转圈，3秒一圈

<div class="wrap">
    <div class="wrap-inner"></div>
    <div class="indicator"></div>
  </div>

    .wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display:flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: cadetblue;
    }
    .wrap-inner {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: aqua;
    }
    .indicator {
      width: 150px;
      height: 6px;
      position: absolute;
      background-color: black;
      left: 63%;
    }

感谢

Answer 1

写了个 demo：https://codepen.io/meathill/p...

其实关键点就是：transform-origin: center left，改变变形中心。