如何实现U型虚线边框的持续左右循环动画效果？

直接用原生border实现虚线位移会因缺失上边框导致效果不协调，推荐用背景渐变模拟虚线，配合background-position实现平滑的左右循环移动效果，代码如下：

.curved-dots-path {
  align-self: center;
  width: 70%;
  height: 25rem;
  margin-top: -30rem;
  border-top: none;
  border-radius: 0 0 50% 50%;
  /* 线性渐变绘制虚线：10px实线+10px空白 */
  background-image: linear-gradient(to right, var(--org-primary-color) 50%, transparent 50%);
  background-size: 20px 5px;
  /* 定位背景覆盖下、左、右三边，模拟U型 */
  background-position: 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-y, repeat-y;
  /* 添加循环移动动画 */
  animation: dashMove 2s linear infinite;
}

/* 定义动画：通过改变背景位置实现虚线整体移动 */
@keyframes dashMove {
  0% {
    background-position: 0 100%, 0 0, 100% 0;
  }
  100% {
    background-position: 20px 100%, 20px 0, calc(100% - 20px) 0;
  }
}

调整说明： #

• 若要修改虚线粗细，调整background-size的第二个数值（当前是5px）
• 若要修改虚线间距/长度，调整background-size的第一个数值（当前总尺寸20px，对应10px实线+10px空白）
• 若要调整动画速度，修改animation中的时长（当前是2s）

内容的提问来源于stack exchange，提问作者Horthman Odame