html - 使用关键帧动画化 CSS 按钮边框

Question

我试图在我的网页上制作一个按钮动画，它基本上是一个定时动画，从按钮顶部开始，然后最终填满按钮的整个边框。我附上了一张图片，因为很难描述我的意思。

我确信这可以通过关键帧来完成，但我不知道如何做。我试过这样的事情来开始:

  @keyframes borderblueanim {
    0% {border-color: #fff; }
    100% {border-color: blue; }
  }
  @-webkit-keyframes borderblueanim {
    0% {border-color: #fff; }
    100% {border-color: blue; }
  }

  animation: borderblueanim 5s infinite;
   -webkit-animation: borderblueanim 2s infinite;

但这不正确。将不胜感激任何想法和帮助。

Answer 1

实现此目的的一种方法是为路径的 stroke-offset 设置动画。我已经包含了使用 circle 路径的示例代码。根据元素的大小，您需要更改 dasharray 和 dashoffset 值。

svg {
  fill: #eee;
  overflow: visible;
  transform-origin:50% 50%;
  transform: rotate(-90deg);
}
.path {
  stroke: blue;
  stroke-width: 4;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: borderblueanim 2s infinite;
  
}

@keyframes borderblueanim {
  from {
    stroke-dashoffset: 800;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle class="path" cx="100" cy="100" r="100"/>
</svg>