reactjs 如何动画U形虚线边框？

vfh0ocws 于 2023-04-20 发布在 React

关注(0)|答案(1)|浏览(148)

我正试图动画一个U形虚线边界，使它从左到右不断移动。
需要帮助的代码PLS〈3.
这里是代码。

.curved-dots-path {
  align-self: center;
  width: 70%;
  border: 5px dashed var(--org-primary-color);
  border-top: none;
  border-radius: 0 0 50% 50%;
  height: 25rem;
  margin-top: -30rem;
}

image of U-shaped dashed border - animation to be moved from left to right

reactjs

来源：https://stackoverflow.com/questions/76045491/how-to-animate-u-shaped-dashed-border

1条答案

按热度按时间

nszi6y051#

创建SVG曲线，如果您不熟悉以编程方式创建SVG，您可以在Illustrator，Inkscape或任何其他SVG编辑器中绘制并导出它。
在SVG中添加stroke-dasharray属性。stroke-dasharray: 15, 10;意味着每一行的宽度为15 px，中间有5 px的间隙。stroke-dashoffset: 0是起始位置，而stroke-dashoffset: -25在破折号动画中是应该移动多少像素的笔划，将其设置为间隙和笔划宽度之和（25 px = 15 + 10）以避免跳跃。

svg {
  stroke-dasharray: 15, 10;
  stroke-dashoffset: 0;
  animation: dash 1s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -25;
  }
}

path {
  stroke: #000;
  fill: transparent;
  stroke-width: 2;
}

<svg>
  <path d="M50,50 Q100,100 150,50" />
</svg>

更新：
这是一个很好的在线tool，允许您根据自己的喜好自定义SVG路径。

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs 如何动画U形虚线边框？

1条答案

相关问题

热门标签

最新问答