html - 我希望文本具有与边框相同的动画背景

Question

我正在尝试为文本提供相同的边框动画，但我不知道该怎么做，也不知道是否可行。我想知道你是否有这方面的想法。谢谢你的回答!

.rainbow {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 214px;
  height: 64px;
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d,     #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  
  -webkit-animation: rainbow 7s ease infinite;
  -z-animation: rainbow 7s ease infinite;
  -o-animation: rainbow 7s ease infinite;
  animation: rainbow 7s ease infinite;
}

.bottone {
  position: absolute;
  z-index: 999;
  padding-top: 15px;
  text-align: center;
  font-family: sans-serif;
  width: 200px;
  height: 35px;
  border: 3px solid transparent;
  background: white;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

<div class="rainbow"></div>
<a class="bottone">Text</a>

非常感谢!

Answer 1

将背景放在文字前面，并使用mix-blend-mode: screen;在上面。另请注意外容器上的黑色边框。

.rainbow {
  position: absolute;
  top: -3px;
  right: -3px;
  bottom: -3px;
  left: -3px;
  z-index: 1;
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  -webkit-animation: rainbow 7s ease infinite;
  -z-animation: rainbow 7s ease infinite;
  -o-animation: rainbow 7s ease infinite;
  animation: rainbow 7s ease infinite;
  mix-blend-mode: screen;
  pointer-events: none; /** if you want the text to be selectable **/
}

.bottone {
  display: inline-block;
  position: relative;
  padding-top: 15px;
  text-align: center;
  font-family: sans-serif;
  width: 200px;
  height: 35px;
  border: 3px solid black;
  background: white;
}

@-webkit-keyframes rainbow {
  0% {
    background-position: 0% 82%
  }
  50% {
    background-position: 100% 19%
  }
  100% {
    background-position: 0% 82%
  }
}

@-moz-keyframes rainbow {
  0% {
    background-position: 0% 82%
  }
  50% {
    background-position: 100% 19%
  }
  100% {
    background-position: 0% 82%
  }
}

@-o-keyframes rainbow {
  0% {
    background-position: 0% 82%
  }
  50% {
    background-position: 100% 19%
  }
  100% {
    background-position: 0% 82%
  }
}

@keyframes rainbow {
  0% {
    background-position: 0% 82%
  }
  50% {
    background-position: 100% 19%
  }
  100% {
    background-position: 0% 82%
  }
}

<a class="bottone">
  Text
  <div class="rainbow"></div>
</a>