Question

我试图让一个移动的边框CSS动画在广场上工作，但我不能弄清楚如何让它工作。它在圆上工作正常，因为我只使用关键帧的旋转过渡。这是我目前的标记。

＆＃13;

.box {
  width: 50px;
  height: 50px;
  margin: 50px auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  position: relative;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.box .border {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 50px;
  height: 50px;
  background: transparent;
  border: 4px solid transparent;
  border-top-color: orangered;
  border-radius: 50%;
  animation-name: border;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}
@-webkit-keyframes border {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }

＆＃13;

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

＆＃13;

Answer 1

有问题的动画是使用带有静止边框的rotate变换来创建移动边框的错觉，而实际上并非如此。使用正方形，你不能使用类似的模型，因为当我们旋转方形时，它不像圆圈一样保持不变。

因此可用的选项是使用基于SVG stroke-dashoffset的动画，如下面的代码段所示。 stroke-dasharray属性提供笔划的长度/宽度（1 ^st param）和空间的长度/宽度（2 ^nd param）。 stroke-dashoffset属性指定应该绘制笔划的起始位置的偏移量。

polygon {
  stroke: red;
  stroke-width: 3;
  stroke-dasharray: 50, 750;
  stroke-dashoffset: 0;
  fill: none;
  animation: border 5s linear infinite;
}
@keyframes border {
  to {
    stroke-dashoffset: -800;
  }
}

<svg width="210" height="210">
  <polygon points="5,5 205,5 205,205 5,205" />
</svg>

如果您需要纯CSS解决方案，那么您可以使用基于 线性渐变 的解决方案，如下面的代码段所示。在这里，我们基于线性渐变创建四条背景图像，这些渐变具有相同的边框厚度。这些条带具有所需宽度的颜色，然后对其余条带透明。通过设置background-position的动画，我们可以获得与我们正在寻找的效果相近的。

请注意，background-position动画仅适用于 固定像素值 ，因此需要事先知道框的尺寸。每次值更改时，都需要相应地重新配置background-position值。

div {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  background-image: linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px), linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px);
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; /* one of the values is the border thickness, other is 100% */
  background-repeat: no-repeat;
  background-position: -50px 0px, right -50px, 200px bottom, 0px 200px; /* positions such that none of the images are visible at start */
  animation: border 5s linear; /* add infinite if you need infinite animation */
}
@keyframes border {
  /* animate position such that they come into view and go out of it one by one */
  25% {
    background-position: 200px 0px, right -50px, 200px bottom, 0px 200px;
  }
  50% {
    background-position: 200px 0px, right 200px, 200px bottom, 0px 200px;
  }
  75% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px 200px;
  }
  100% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px -50px;
  }
}

<div class='border-animation'></div>

如果你想要一个更接近SVG的纯CSS解决方案，那么我们可以为动画添加更多的关键帧，如下面的代码片段。

div {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  background-image: linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px), linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px);
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
  background-repeat: no-repeat;
  background-position: -50px 0px, right -50px, 200px bottom, 0px 200px;
  animation: border 5s linear;
}
@keyframes border {
  20% {
    background-position: 150px 0px, right -50px, 200px bottom, 0px 200px;
  }
  25% {
    background-position: 200px 0px, right 0px, 200px bottom, 0px 200px;
  }
  45% {
    background-position: 200px 0px, right 150px, 200px bottom, 0px 200px;
  }
  50% {
    background-position: 200px 0px, right 200px, 150px bottom, 0px 200px;
  }
  70% {
    background-position: 200px 0px, right 200px, 0px bottom, 0px 200px;
  }
  75% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px 150px;
  }
  95% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px 0px;
  }
  100% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px -50px;
  }
}

<div class='border-animation'></div>

这是一个使用纯CSS的更完整的无限动画：

div {
  height: 200px;
  width: 200px;
  box-sizing: border-box;
  background-image: linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px), linear-gradient(to right, red 50px, transparent 50px), linear-gradient(to bottom, red 50px, transparent 50px);
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
  background-repeat: no-repeat;
  background-position: 0px 0px, right -50px, 200px bottom, 0px 200px;
  animation: border 5s linear infinite;
}
@keyframes border {
  20% {
    background-position: 150px 0px, right -50px, 200px bottom, 0px 200px;
  }
  25% {
    background-position: 200px 0px, right 0px, 200px bottom, 0px 200px;
  }
  45% {
    background-position: 200px 0px, right 150px, 200px bottom, 0px 200px;
  }
  50% {
    background-position: 200px 0px, right 200px, 150px bottom, 0px 200px;
  }
  70% {
    background-position: 200px 0px, right 200px, 0px bottom, 0px 200px;
  }
  75% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px 150px;
  }
  95% {
    background-position: 200px 0px, right 200px, -50px bottom, 0px 0px;
  }
  95.1% {
    background-position: -50px 0px, right 200px, -50px bottom, 0px 0px;
  }
  100% {
    background-position: 0px 0px, right 200px, -50px bottom, 0px -50px;
  }
}

<div class='border-animation'></div>

Answer 2

只需添加animated-border.min.css文件，您就可以通过纯css3动画边框完成任务。这是代码片段。

<a href="ui-box top-leftStart">
  <span class='ui-border-element'>
    Animated Hyperlink
  </span>
</a>

包含此css文件：https://cdn.jsdelivr.net/gh/code-fx/Pure-CSS3-Animated-Border@V1.0/css/animated-border/animated-border.min.css

演示链接：https://code-fx.github.io/Pure-CSS3-Animated-Border/

我创建了这个演示页。

使移动边框动画在方形元素上工作

2 个答案: