我正在寻找一个 CSS 规则，它可以为 button's colored gradient background 创建 CSS 动画。 .
我只是想玩玩它并这样做:https://codepen.io/prashant-nadsoftdev/pen/bKzOrB .
.custom-btn {
background: linear-gradient(105deg, #f6d365, #fda085, #f6d365, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
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 alternate;
border: 0;
padding: 25px;
font-size: 40px;
color: #fff;
}
@-webkit-keyframes rainbow {
0%{background-position:0% 100%}
100%{background-position:100% 0%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 100%}
100%{background-position:100% 0%}
}
@-o-keyframes rainbow {
0%{background-position:0% 100%}
100%{background-position:100% 0%}
}
@keyframes rainbow {
0%{background-position:0% 100%}
100%{background-position:100% 0%}
}<body style="text-align:center;">
<button class="custom-btn">My Button</button>
</body>我需要颜色仅沿一个方向(从左到右)依次变化。我的代码很接近，但我仍然需要两件事:
- 方向错误(颜色变化需要完全相反的方向)。
- 它不应该停止。在最后一种颜色之后，应该采用第一种颜色，然后继续。
最佳答案
要使渐变动画在一个方向上无限重复，您需要做的主要事情是调整渐变中的色标:
- 重复梯度停止两次。 (这使得渐变的结束看起来像开始，从而允许动画的每次重复之间实现平滑过渡。)
- 最后再次重复第一个梯度停止。 (这使得最后一站与第一站融为一体。)
您还需要调整关键帧，让它们朝着您想要的方向前进(请参阅下面的代码)。
.custom-btn {
background: linear-gradient(105deg,
/* Base gradient stops */
#f6d365, #fda085, #f6d365, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3,
/* Repeat your base gradient stops */
#f6d365, #fda085, #f6d365, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3,
/* Repeat your first gradient stop */
#f6d365);
background-size: 200% 200%;
animation: rainbow 5s linear infinite;
border: 0;
padding: 25px;
font-size: 40px;
color: #fff;
}
@keyframes rainbow {
0% { background-position: 100% 100% }
100% { background-position: 0% 0% }
}<body style="text-align:center;">
<button class="custom-btn">My Button</button>
</body>关于用于创建动画渐变按钮背景的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51129332/