javascript - CSS边框动画——将实线转换为虚线

Question

我创建了一个圆形动画并且效果很好，但是我正在尝试从实线更改为虚线，但我想知道如何完成它，有人可以建议一下吗？

这是现在的样子:

#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.outer-shadow, .inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.inner-shadow {
  top: 1px;
  left: 1px;
  width: 48px;
  height: 48px;
  margin-left: 0;
  margin-top: 0;
  border-radius: 100%;
  background-color: #ffffff;
}
.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 50px, 25px);
  border-radius: 100%;
  background-color: #fff;
}
.fill, .dot span {
  background-color: #f00;
}
.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}
@keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(180deg);
}
}
.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@keyframes right {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}

<div id='loading'>
  <div class='outer-shadow'> </div>
  <div class='inner-shadow'> </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>
</div>

Answer 1

这是您问题的另一个片段。没有真正的方法来移动虚线。相反，我用另一个带有白色边框的圆圈覆盖/揭开下面的虚线圆圈。请看下面:

#c1 {
  stroke-width: 1px;
  stroke: red;
  fill: transparent;
  stroke-dasharray: 5;
}

#c2 {
  animation: render 1s linear both;
  stroke-width: 5px;
  stroke: white;
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 0;
}

@keyframes render {
  100% {
    stroke-dasharray: 377;
    stroke-dashoffset: -377;
  }
}

<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <circle id="c1" cx="120" cy="120" r="60" />
    <circle id="c2" cx="120" cy="120" r="60" />
</svg>