我希望文本具有与边框相同的动画背景 [英] I want the text to have the same animated background as that of the border

问题描述

我正在尝试为文本赋予边框相同的动画，但是我不知道该怎么做，也不知道是否可能。我想知道您是否对此有想法。谢谢您的回答！

I'm trying to give to the text the same animation of the border, but i don't know how to do it, and I don't know if it is possible. I want to know if you have an idea for this. Thank you for the answers!

.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>

非常感谢！

推荐答案

将背景放在文本前面，并使用 mix-blend-mode：屏幕； 。还要注意外部容器上的黑色边框。

Put the background in front of the text, and use mix-blend-mode: screen; on it. Also note the black borders on the outer container.

.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>

这篇关于我希望文本具有与边框相同的动画背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！