如何动画圆形虚线边框？

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

好吧，我试图实现这一点，我想你想要达到的目标，这就是我的结果。我可能误会了你，但无论如何，这值得尝试，而且我知道，它在角落里看起来并不好看。

顺便说一句，我认为你只是想要移动边框＆＃34;如果是这样的话，我只是想告诉你，用一个CSS就不可能（但是？）属性，但你可以用多个盒子和动画作弊。

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;