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

.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); 
 
    } 
 
}

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

编辑，更新

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

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

Answer 2

如果可能的话，我想强烈建议您使用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>

Answer 3

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

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