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

我试图给文本提供相同的边界动画，但我不知道如何做，也不知道这是否可行。我想知道你对此是否有想法。谢谢你的回答

.rainbow{
位置：绝对位置；
顶部：4px；
左：4px；
宽度：214px；
高度：64px；
背景：线性梯度（124deg，#ff2400，#e81d1d，#e8b71d，#e3e81d，#1de840，#1ddde8，#2b1de8，#dd00f3，#dd00f3）；
背景尺寸：1800%1800%；
-webkit动画：彩虹7s轻松无限；
-z动画：彩虹7s轻松无限；
-o-动画：彩虹7s轻松无限；
动画：彩虹7s轻松无限；
}
鲍顿先生{
位置：绝对位置；
z指数：999；
填充顶部：15px；
文本对齐：居中；
字体系列：无衬线；
宽度：200px；
高度：35px；
边框：3倍纯色透明；
背景：白色；
}
@-webkit关键帧彩虹{
0%{背景位置：0%82%}
50%{背景位置：100%19%}
100%{背景位置：0%82%}
}
@-moz为彩虹设置关键帧{
0%{背景位置：0%82%}
50%{背景位置：100%19%}
100%{背景位置：0%82%}
}
@-o-关键帧彩虹{
0%{背景位置：0%82%}
50%{背景位置：100%19%}
100%{背景位置：0%82%}
}
@彩虹{
0%{背景位置：0%82%}
50%{背景位置：100%19%}
100%{背景位置：0%82%}
}

文本

将背景放在文本前面，并在其上使用。还要注意外部容器上的黑色边框

.rainbow{
位置：绝对位置；
顶部：-3px；
右：-3px；
底部：-3px；
左：-3px；
z指数：1；
背景：线性梯度（124deg，#ff2400，#e81d1d，#e8b71d，#e3e81d，#1de840，#1ddde8，#2b1de8，#dd00f3，#dd00f3）；
背景尺寸：1800%1800%；
-webkit动画：彩虹7s轻松无限；
-z动画：彩虹7s轻松无限；
-o-动画：彩虹7s轻松无限；
动画：彩虹7s轻松无限；
混合模式：屏幕；
指针事件：无；/**如果要选择文本**/
}
鲍顿先生{
显示：内联块；
位置：相对位置；
填充顶部：15px；
文本对齐：居中；
字体系列：无衬线；
宽度：200px；
高度：35px；
边框：3倍纯黑；
背景：白色；
}
@-webkit关键帧彩虹{
0% {
背景位置：0%82%
}
50% {
背景职位：100%19%
}
100% {
背景位置：0%82%
}
}
@-moz为彩虹设置关键帧{
0% {
背景位置：0%82%
}
50% {
背景职位：100%19%
}
100% {
背景位置：0%82%
}
}
@-o-关键帧彩虹{
0% {
背景位置：0%82%
}
50% {
背景职位：100%19%
}
100% {
背景位置：0%82%
}
}
@彩虹关键帧{
0% {
背景位置：0%82%
}
50% {
背景职位：100%19%
}
100% {
背景位置：0%82%
}
}

正文

我试过使用颜色：透明，但不起作用。我需要帮助，因为我不知道如何使用，而且您发送的代码笔不是我需要的。抱歉，我误解了。很高兴你得到了答案：）没问题，谢谢