如何动画圆形虚线边框？

Question

我有一种情况，我必须制作一个半圆形边框，即虚线边框。现在我可以为边框设置动画了。

请帮忙

.box{
	height:90px;
	width: 500px;
	background: #ffb08f;
	border-radius:  0 0 30px 30px;
	border: 1px dashed #000;
	border-top:none;
}

<div class="box"></div>

Answer 1

感谢您的回答我得到了解决方案-

.line-box {
    top:10px;
    left: 10px;
    overflow: hidden;
    position: absolute;
    display: block
}

.line-box svg {
    position: relative;
    top: -24px;
}
.path {
  animation: dash 20s linear  infinite;
  -moz-animation: dash 20s linear  infinite;
  -webkit-animation: dash 20s linear  infinite;
  -o-animation: dash 20s linear  infinite;
  -ms-animation: dash 20s linear  infinite;
}


@keyframes dash {
  from {stroke-dashoffset: 0;}
  to {stroke-dashoffset: 2000;}
}
@-moz-keyframes dash {
  from {stroke-dashoffset: 0;}
  to {stroke-dashoffset: 2000;}
}
@-webkit-keyframes dash {
  from {stroke-dashoffset: 0;}
  to {stroke-dashoffset: 2000;}
}
@-o-keyframes dash {
  from {stroke-dashoffset: 0;}
  to {stroke-dashoffset: 2000;}
}
@-ms-keyframes dash {
  from {stroke-dashoffset: 0;}
  to {stroke-dashoffset: 2000;}
}

<div class="line-box">
 <svg height="70" width="400">
  <path d="M167,1 h181 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-50 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#fff" stroke-width="1"/>
  <path stroke-dasharray="6,6" d="M167,1 h181 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-50 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#000" stroke-width="1" class="path"/>

  <path d="M21,2 h273 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-271 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#fff" stroke-width="1"/>
  <path stroke-dasharray="6,6" d="M21,2 h273 a20,20 0 0 1 20,20 v27 a20,20 0 0 1 -20,20 h-271 a20,20 0 0 1 -20,-20 v-27 a20,20 0 0 1 20,-20 z" fill="#ffb08f" stroke="#000" stroke-width="1" class="path"/>
 </svg> 
</div>

Answer 2

嗯，我试图实现这一点，我猜你想要实现的，这是我的结果。我可能误解了你，但无论如何，值得一试，而且我知道，它在角落里看起来不太好。

顺便说一句，我认为您只是想制作“移动边框”，如果是这样，我只是想告诉您，使用类似的 CSS 属性是不可能的（还没有？），但您可以稍微作弊多个框和动画。

如果我错了，请纠正我；）

如果您需要不同的设置，请记住更改.box CSS 中的top, bottom, right and left 属性以匹配您的边框。

.box-container{
  position: relative;
  overflow: hidden;
  height: 47px;
}

.wrapper {
  height: 90px;
  width: 500px;
  background: #ffb08f;
  border: 1px solid #fff;
  border-radius: 30px;
  animation: 1s borderAnimOne infinite;
  position: relative;
  top: -45px;
}

.box {
  height: 90px;
  border: 1px dashed #000;
  border-radius: 30px;
  position: absolute;
  animation: 1s borderAnimTwo infinite;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: -1px;
}

@keyframes borderAnimOne {
  0% {
    border-color: #fff;
  }
  50% {
    border-color: #000;
  }
  100% {
    border-color: #fff;
  }
}

@keyframes borderAnimTwo {
  0% {
    border-color: #000;
  }
  50% {
    border-color: #fff;
  }
  100% {
    border-color: #000;
  }
}

<div class="box-container">
  <div class="wrapper">
    <div class="box"></div>
  </div>
</div>