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

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

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

forRemoval=true

＆＃13;

.circle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: 2px dotted transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  position: relative;
  margin: 30px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    border-right-color: red;
  }
  50% {
    border-bottom-color: red;
  }
  75% {
    border-left-color: red;
  }
  100% {
    border-top-color: red;
    border-left-color: red;
    border-bottom-color: red;
    border-right-color: red;
    transform: rotate(360deg);
  }
}

＆＃13;

修改，更新

＆＃13;

<div class="circle"></div>

＆＃13;

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-color: transparent;
  border-style: hidden;
  border-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-bottom-style: dotted;
  border-left-style: dotted;
  border-top-style: dotted;
  border-right-style: dotted;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: .25s;
  position: relative;
  margin: 30px auto;
  transform: rotate(45deg);
  transition: border 1s ease-in .25s;
}

@keyframes spin {
  0% {
    border-top-width: 2px;
    border-top-color: red;
  }
  25% {
    border-right-width: 2px;
    border-right-color: red;
  }
  50% {
    border-bottom-width: 2px;
    border-bottom-color: red;
  }
  75% {
    border-left-width: 2px;
    border-left-color: red;
  }
  100% {
    border: 2px dotted red;
  }
}

＆＃13;

Answer 3

如果可能，我强烈建议使用SVG，因为它会让您的生活更轻松。

在下面的示例中，我使用stroke-dasharray和stroke-dashoffset来操纵边框。 stroke-dasharray代表短划线的长度，stroke-dashoffset表示偏离虚线开始的位置。

默认情况下，我指定了stroke-dasharray: 377;和stroke-dashoffset: 377;。这意味着它使用377px长度的破折号和空格，间距为377px。

如果您将stroke-dashoffset更改为0，则会逐渐绘制（减少偏移）圆圈边框。由于圆周长度约为377px（2 x Pi x 60px），因此它将形成一个没有任何破折号的圆圈。

在动画的最后一帧，只要您将stroke-dasharray更改为较小的数字，它就会将其边框转换为破折号。

circle {
  stroke-width: 1px;
  stroke: red;
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  animation: render 1s linear both;
}

@keyframes render {
  99% {
    stroke-dasharray: 377;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 5; 
    stroke-dashoffset: 0;
  }
}

<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <circle cx="80" cy="80" r="60" />
</svg>

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

3 个答案: