Javascript 沿矩形边框的进度条

我试图弄清楚如何围绕矩形实现progressbar。让我们想象一下，我的div500x300有5px（黑色）边框

我希望进度条从左上角开始，然后转到->右下角->右下角->左下角->然后回到起点

---

纯CSS:

这种效果可以通过CSS实现，CSS使用多个线性渐变作为背景，并对它们进行适当的定位。方法如下：

• 为元素的每个边框创建4个薄的

  线性渐变
  背景。边框的厚度决定了背景的大小。也就是说，如果边框厚度为5px，则产生顶部和底部边框的线性渐变将为
  100%5px
  （100%宽度5px高度），而产生左侧和右侧边框的线性渐变将为
  5px 100%
  （3px宽度100%高度）

• 最初设置

  背景位置

  ，使任何边框都不可见。在动画过程中，我们将每个背景渐变设置为正确的位置。这会产生具有动画边框的效果

我在下面的代码片段中使用了CSS关键帧，因此它会从开始到结束自动设置动画（也就是说，只有在绘制完完整的边框后才会停止），但如果您希望对其进行更多控制（并在进度条中说中途停止）然后您可以使用JS并根据进度百分比修改

背景位置


。进度{
高度：300px；
宽度：500px；
背景：线性渐变（右侧，黑色99.99%，透明）、线性渐变（底部，黑色99.99%，透明）、线性渐变（右侧，黑色99.99%，透明）、线性渐变（底部，黑色99.99%，透明）；
背景尺寸：100%5px，5px 100%，100%5px，5px 100%；
背景重复：无重复；
动画：直线前进；
背景位置：-500px 0px，495px-300px，500px 295px，0px 300px；
}
@关键帧进度{
0% {
背景位置：-500px 0px，495px-300px，500px 295px，0px 300px；
}
25% {
背景位置：0px 0px，495px-300px，500px 295px，0px 300px；
}
50% {
背景位置：0px 0px，495px 0px，500px 295px，0px 300px；
}
75% {
背景位置：0px 0px，495px 0px，0px 295px，0px 300px；
}
100% {
背景位置：0px 0px，495px 0px，0px 295px，0px 0px；
}
}
纯CSS:

这种效果可以通过CSS实现，CSS使用多个线性渐变作为背景，并对它们进行适当的定位。方法如下：


为元素的每个边框创建4个薄的
线性渐变
背景。边框的厚度决定了背景的大小。也就是说，如果边框厚度为5px，则产生顶部和底部边框的线性渐变将为
100%5px
（100%宽度5px高度），而产生左侧和右侧边框的线性渐变将为
5px 100%
（3px宽度100%高度）

最初设置
背景位置
，使任何边框都不可见。在动画过程中，我们将每个背景渐变设置为正确的位置。这会产生具有动画边框的效果

我在下面的代码片段中使用了CSS关键帧，因此它会从开始到结束自动设置动画（也就是说，只有在绘制完完整的边框后才会停止），但如果您希望对其进行更多控制（并在进度条中说中途停止）然后您可以使用JS并根据进度百分比修改
背景位置


。进度{
高度：300px；
宽度：500px；
背景：线性渐变（右侧，黑色99.99%，透明）、线性渐变（底部，黑色99.99%，透明）、线性渐变（右侧，黑色99.99%，透明）、线性渐变（底部，黑色99.99%，透明）；
背景尺寸：100%5px，5px 100%，100%5px，5px 100%；
背景重复：无重复；
动画：直线前进；
背景位置：-500px 0px，495px-300px，500px 295px，0px 300px；
}
@关键帧进度{
0% {
背景位置：-500px 0px，495px-300px，500px 295px，0px 300px；
}
25% {
背景位置：0px 0px，495px-300px，500px 295px，0px 300px；
}
50% {
背景位置：0px 0px，495px 0px，500px 295px，0px 300px；
}
75% {
背景位置：0px 0px，495px 0px，0px 295px，0px 300px；
}
100% {
背景位置：0px 0px，495px 0px，0px 295px，0px 0px；
}
}

有两种方法可以做到这一点。首先使用画布（可能是最好的，但需要更长的时间），或者您可以使用4个绝对定位的div，并根据需要设置每个div的宽度/高度。首先使用画布（可能是最好的，但需要更长的时间），或者您可以使用4个绝对定位的div，并根据需要设置每个div的宽度/高度。谢谢，这是一个很好的方法！它既便宜又简单我正要开始工作，用一种复杂又昂贵的方法来达到同样的效果。谢谢你，这是一个很好的方法！它既便宜又简单我正要开始工作，用一种复杂又昂贵的方法来达到同样的效果。