css - CSS渐变124deg彩虹边框移动

我发现以下CSS脚本可创建彩虹移动背景。

a.logolayout {
    background: linear-gradient(124deg, rgba(255,26,0,0.65), rgba(232,29,29,0.65), rgba(232,183,29,0.65), rgba(227,232,29,0.65), rgba(29,232, 64,0.65), rgba(29,221,232,0.65), rgba(43,29,232,0.65), rgba(221,0,243,0.65), rgba(221,0,243,0.65));
    transition: 0.8s;
    border: 1px; solid none;
    -webkit-animation: rainbow 19s ease infinite;
    -z-animation: rainbow 19s ease infinite;
    -o-animation: rainbow 19s ease infinite;
    animation: rainbow 19s ease infinite;
    background-size: 200% 200%;
}

a.logolayout:hover {
    background: linear-gradient(124deg, rgba(255,26,0,0.85), rgba(232,29,29,0.85), rgba(232,183,29,0.85), rgba(227,232,29,0.85), rgba(29,232, 64,0.85), rgba(29,221,232,0.85), rgba(43,29,232,0.85),      rgba(221,0,243,0.85), rgba(221,0,243,0.85));
    background-size: 200% 200%;
    color: white;
    -webkit-animation: rainbow 9s ease infinite;
    -z-animation: rainbow 9s ease infinite;
    -o-animation: rainbow 9s ease infinite;
    animation: rainbow 9s ease infinite;
}

@-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%}
}

是否可能只有一个边界在做同样的事情？

|---------|
|  text   |
|---------|

文本没有背景并且是透明的。只有边界具有彩虹效果。线条是边框，边框宽度为5px。

更新：

<div id="full-background-pic">
    <a class="only-rainbow-border-moving" > text-see the backgroundpic</a>
</div>

最佳答案

这样吗？

a.logolayout {
    background: linear-gradient(124deg, rgba(255,26,0,0.65), rgba(232,29,29,0.65), rgba(232,183,29,0.65), rgba(227,232,29,0.65), rgba(29,232, 64,0.65), rgba(29,221,232,0.65), rgba(43,29,232,0.65), rgba(221,0,243,0.65), rgba(221,0,243,0.65));
    transition: 0.8s;
    border: 1px; solid none;
    -webkit-animation: rainbow 9s ease infinite;
    -z-animation: rainbow 9s ease infinite;
    -o-animation: rainbow 9s ease infinite;
    animation: rainbow 9s ease infinite;
    background-size: 200% 200%;
}

a.logolayout:hover {
    background: linear-gradient(124deg, rgba(255,26,0,0.85), rgba(232,29,29,0.85), rgba(232,183,29,0.85), rgba(227,232,29,0.85), rgba(29,232, 64,0.85), rgba(29,221,232,0.85), rgba(43,29,232,0.85),      rgba(221,0,243,0.85), rgba(221,0,243,0.85));
    background-size: 200% 200%;
    -webkit-animation: rainbow 5s ease infinite;
    -z-animation: rainbow 5s ease infinite;
    -o-animation: rainbow 5s ease infinite;
    animation: rainbow 5s ease infinite;
}

@-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.logolayout{
  padding: 5px;
  display: inline-block
}

a.logolayout div{
  padding: 5px;
  color: #fff;
}

.bgimg{
  padding 20px;
  background: url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
}

.innerbgimg{
  background: -5px -5px url(https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg);
}

<div class="bgimg">
<a class="logolayout">
<div class="innerbgimg">Test</div>
</a>
</div>