虚线圆旋转的三种写法

效果图

第一种写法虚线太丑了，所以用了canvas画，结果有些圆弧失真了，暂时还没有解决办法；第三种就是UI切图(捂脸.jpg)

        

          
          
          点击
        
        
        
        
        

// 第2种  
.left-canvas {
      position: relative;
      // width: 300px;
      // height: 300px;
      // border-radius: 50%;
      i {
        width: 300px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        transform: rotate(180deg);
        transition: all 0.5s linear;
      }
      .ship-img {
        position: absolute;
        top: -68px;
        left: 100px;
        width: 100px;
        // height: 60px;
        border-radius: 50%;
        // background: #ff6200;
        transform: rotate(0deg);
      }
    }
// 第3种 
    .left-img-circle {
      position: relative;
      width: 300px;
      height: 300px;
      border-radius: 50%;

      .circle-imgq {
        width: 300px;
        height: 300px;
        border-radius: 50%;
      }
      i {
        width: 300px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        transform: rotate(0deg);
        transition: all 0.5s linear;
      }
      .ship-img {
        position: absolute;
        top: -68px;
        left: 100px;
        width: 100px;
        // height: 60px;
        border-radius: 50%;
        // background: #ff6200;
      }
    }

// 第1种
.module_box {
  height: 400px;
  display: flex;
  margin-top: 10px;
}
.box {
  position: relative;
  width: 300px;
  height: 300px;
  border: 3px dashed #ffab00;
  border-radius: 50%;
}
.box i {
  width: 300px;
  height: 300px;
  position: absolute;

  /*旋转动画*/
  //   animation: circleRoate 5s infinite linear;
  transform: rotate(0deg);
  transition: all 0.5s linear;
}
.box i .ship-img {
  position: absolute;
  top: -68px;
  left: 100px;
  width: 100px;
  // height: 60px;
  border-radius: 50%;
  // background: #ff6200;
}