javascript - 如何为具有线性渐变但具有透明背景的边框设置动画

Question

我想用线性渐变为元素的边框设置动画；该元素具有透明背景。为了说明这一点，请看以下图片:

下面是一个非常接近我需求的解决方案，但我无法删除背景。

.btn__get-tickets {
  padding: 10px;
  background: white;
  background-clip: content-box;
  position: relative;
}
.btn__get-tickets:after, .btn__get-tickets:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content:'';
}
.btn__get-tickets:after {
  background: linear-gradient(140deg, #5bc7d3, #88ca43, #fdd207);
  z-index: -1;
  animation: test 5s ease infinite;
}
.btn__get-tickets:before {
  background: linear-gradient(120deg, #88ca43, #fdd207,#5bc7d3);
  z-index: -2;
}

@keyframes test {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

下一个解决方案也非常接近，但背景有同样的问题:

https://codepen.io/pimmey/pen/NABQWX

是否可以使用 Javascript 为 border-image 属性设置动画？

Answer 1

这是一个从背景中的渐变动画到假边框的示例:

button {
  vertical-align: top;
  border: none;
  padding: 15px;
  background: linear-gradient(
        to right,/* use every colors and repeat first one at the end*/
        #79c975,
        #5dc7cc,
        #fad108,
        #b9ce2b,
        #79c975
      )
      160%
      0
      repeat-x,
    linear-gradient(to top, #79c975, #5dc7cc, #fad108, #b9ce2b, #79c975)
      100%
      20%
      repeat-y,
    linear-gradient(to left, #79c975, #5dc7cc, #fad108, #b9ce2b, #79c975)
      10%
      100%
      repeat-x,
    linear-gradient(to bottom, #79c975, #5dc7cc, #fad108, #b9ce2b, #79c975)
      0%
      10%
      repeat-y;

  background-size: 300% 10px, 10px 300%;/* increase size to show at once the bit from 2 gradient colors */
  animation: bd 5s infinite linear;
}
@keyframes bd {
  50% {
    background-position: 460% 0, 100% 320%, 310% 100%, 0% 310%;/* average reset of bg-position , tune it to desired effect */
  }
}
body {
  background: gray;
}

<button>button</button>
<button>and another button</button>

这实际上是 SVG 的工作