html - 如何动画圆形虚线边框？

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>