如何制作圆角虚线边框动画？ [英] How to animated rounded dashed border?

问题描述

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

I have a situation I have to make a half rounded border which is dashed border. Now can I animate border.

请帮助

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

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

推荐答案

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

Thanks for your answer I got the solution -

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

这篇关于如何制作圆角虚线边框动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！