本文介绍了用于创建动画渐变按钮背景的CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找可以为button's colored gradient background创建CSS动画的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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！