我的CSS和用于演示的代码段:
/*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 {
padding:0 0 3px 0 !important;
border-bottom: 1px solid transparent;
border-radius: 10px;
/*added a colourstop here, without the third colourstop you get a hard edge*/
background: linear-gradient(#181717, #181717),
linear-gradient(60deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-origin: border-box;
background-clip: content-box, border-box;
animation-name: rainbow;
animation-duration: 4s;
/*set animation to continue forever, and to move at a single rate instead of easing*/
animation-iteration-count: infinite;
animation-timing-function: linear;
}
https://codepen.io/jhendrix13/pen/zyrmzqz
有没有办法进一步增加颜色之间的渐变/混合？
我试着让它和这个片段类似，它在颜色之间有一个更平滑的混合/过渡:
https://codepen.io/mike-schultz/pen/ngqvgo
但是我对CSS的了解很少，而且我不知道如何得到这个结果。 我认为这与动画定义本身有关，但是当我尝试从第二个片段中获取动画定义并将其放入第一个片段时，动画停止工作并变为静态。
如果使用::after可以达到更好的效果:
null
.box {
margin: 20px;
}
.text {
color: white;
padding: 10px 0;
text-align: center;
}
@-webkit-keyframes rainbow {
0% {
background-position: 200% 0%;
}
100% {
background-position: 0% 0%;
}
}
.rainbow {
border-radius: 6px;
background: #000;
}
.rainbow::after {
content: "";
display: block;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height: 5px;
width: 100%;
background: linear-gradient( 60deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3, #ff2400);
background-size: 200% 200%;
animation-name: rainbow;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}<div class="box rainbow">
<div class="text">
This is a box with a rainbow border.
</div>
</div>