如何创建旋转虚线圆边框？答案

【问题标题】：How do I create a rotating dotted circle border?如何创建旋转虚线圆边框？
【发布时间】：2021-11-19 17:15:21
【问题描述】：

我在一个旋转的圆圈虚线边框之后。这是我目前所拥有的：

 /*Stylings*/
        .square {
        width: 70px;
    height: 61px;
    background: red;
        }
        .button-border {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 4px dotted #6B8291;
         -webkit-animation-name: Rotate;
         -webkit-animation-duration: 20s;
         -webkit-animation-iteration-count: infinite;
         -webkit-animation-timing-function: linear;
         -moz-animation-name: Rotate;
         -moz-animation-duration: 20s;
         -moz-animation-iteration-count: infinite;
         -moz-animation-timing-function: linear;
         -ms-animation-name: Rotate;
         -ms-animation-duration: 20s;
         -ms-animation-iteration-count: infinite;
         -ms-animation-timing-function: linear;
        }
        .button-container {
            position: relative;
            width: 138px;
            height: 138px;
        }
        .img_rotating .square {
            position: absolute;
            top: 50%;
            left: 50%!important;
            transform: translate(-50%,-50%);
        }
    /*Animation*/
        @-webkit-keyframes Rotate
        {
         from{-webkit-transform:rotate(0deg);}
         to{-webkit-transform:rotate(360deg);}
        }
        @-moz-keyframes Rotate
        {
         from{-moz-transform:rotate(0deg);}
         to{-moz-transform:rotate(360deg);}
        }

    <div class="img_rotating">
     <div class="button-container">
      <div class="square"></div>
       <div class="button-border"></div>
     </div>
    </div>

我担心的是这两个点的间距不均匀。我想这是边界的尽头实际交汇的地方。有点难以注意到，所以我附上截图：

有没有更好的方法来编写这个代码？我想要一个没有这两个近点的圆圈。

非常感谢！

【问题讨论】：

由于点是由浏览器自动呈现的，因此您无能为力。尝试使用边框 5px。
谢谢，很遗憾，边框宽度不能解决问题，不管边框多粗，问题依旧。
这不是什么大问题。我会忘记的。

标签： css animation border dotted-line

【解决方案1】：

只是一个想法，不是一个完整的答案，但我想插入一段代码。如何只创建一个点并使用box-shadow 生成其余点。可能使用 Sass 或 JS。这样，您始终可以创建一个完美的圆（您可以自己计算每个球的位置，也可以根据需要更改颜色）。这也将是可扩展的。我不得不稍微修改你的代码，看看结果。

body {
  display: flex;
  justify-content: center;
  padding-top: 5em;
  height: 100vh;
}

.square {
  width: 70px;
  height: 61px;
  background: red;
}
.dot {
  width: 100%;
  color: red;
  border: 1px solid green;
  height: 100%;
  border-radius: 50%;
  -webkit-animation-name: Rotate;
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: Rotate;
  -moz-animation-duration: 20s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: Rotate;
  -ms-animation-duration: 20s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
}
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 138px;
  height: 138px;
}

.square {
  position: relative;
}

.dot {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/*Animation*/
@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes Rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

.dot {
  width: 10px;
  height: 10px;
  box-shadow: 100px 0px black, -100px 0px black, 0px -100px blue, 0px 100px blue,
    71px -71px green, -71px 71px green, -71px -71px pink, 71px 71px pink;
}

<div class="img_rotating">
  <div class="button-container">
    <div class="square">
      <div class="dot"></div>
    </div>
  </div>
</div>

【讨论】：