生成动画彩虹边框

Question

我一直在使用background-image CSS属性来创建彩虹边框，如下所示：

.rainbow {
  border: double 0.3em transparent;
  border-radius: 10px;
  background-image: linear-gradient(white, white), 
  linear-gradient(to right, rgb(235, 50, 235), rgb(82, 82, 209));
  background-origin: border-box;
  background-clip: content-box, border-box;
}

并且想为其制作动画。可以为background-image设置动画，如果可以，该如何使用？

Answer 1

我能够通过将背景位置动画化为偏移量来实现此功能，动画在浏览器上重置时会出现非常轻微的闪烁，但是您可以通过使用较大的vh值来使其不那么频繁，而且这实际上是在较厚的元素上（或当您有边框3em之类的东西时）明显

    /*animate the background gradient position, use vh so that start/end syncs up viewport horizontal*/
@keyframes rainbow {
    from {background-position: -100vh 0}
    to {background-position: 100vh 0}
} 

/*compatibility*/
@-moz-keyframes rainbow {
    from {background-position: -100vh 0}
    to {background-position: 100vh 0}
}
@-webkit-keyframes rainbow {
    from {background-position: -100vh 0}
    to {background-position: 100vh 0}
}
@-ms-keyframes rainbow {
    from {background-position: -100vh 0}
    to {background-position: 100vh 0}
}
@-o-keyframes rainbow {
    from {background-position: -100vh 0}
    to {background-position: 100vh 0}
}

 .rainbow {
  border: double 0.3em transparent;
  border-radius: 10px;
     /*added a colourstop here, without the third colourstop you get a hard edge*/
  background: linear-gradient(white, white), 
  repeating-linear-gradient(to right, rgb(82, 82, 209),rgb(235, 50, 235), rgb(82, 82, 209));
  background-origin: border-box;
  background-clip: content-box, border-box;


            animation-name: rainbow;
            animation-duration:  3s;

            /*set animation to continue forever, and to move at a single rate instead of easing*/
            animation-iteration-count: infinite;
            animation-timing-function: linear;
}
希望这会有所帮助！