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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

这实际上是SVG的工作

Answer 2

最后，使用动画SVG进行此操作的提示为我做了Job。

我的解决方案如下所示：

<a href="#" class="btn btn__get-tickets">Button</a>

SASS

.btn {
  text-decoration: none;
  text-transform: uppercase;
  color: $white-button;
  border: 5px solid transparent;

  &.btn__get-tickets {
    border-image: url("images/test.svg");
    border-image-slice: 20;
  }
}

SVG

`<svg width="160" height="70">
  <defs>
    <linearGradient id="linear" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="0%" stop-color="#7A5FFF">
        <animate attributeName="stop-color" values="#7A5FFF; #01FF89; #7A5FFF" dur="4s" repeatCount="indefinite"></animate>
      </stop>
      <stop offset="100%" stop-color="#01FF89">
        <animate attributeName="stop-color" values="#01FF89; #7A5FFF; #01FF89" dur="4s" repeatCount="indefinite"></animate>
      </stop>
    </linearGradient>
  </defs>
  <rect x="5" y="5" width="150" height="60" fill="url(#linear)"></rect>
</svg>`

如何使用线性渐变为边框设置动画，但具有透明背景

2 个答案: