代码之家 › 专栏 › 技术社区 › CodeThing

用于创建动画渐变按钮背景的css

keyframe linear-gradients css-animations button css

CodeThing · 技术社区 · 7 年前

我在找一个 CSS 可以创建 CSS 动画 button's colored gradient background 是的。

我只是想玩玩它然后做了这个: 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>

我需要颜色在一个方向上一个接一个(从左到右)。我的代码很接近,但我仍然需要两件事:

方向不对(换颜色时需要完全相反的方向)。
它不应该停止。在最后一种颜色之后,它应该取第一种颜色,然后继续。

1 回复 | 直到 7 年前

mfluehr fermar 7 年前

要使渐变动画在一个方向上无限重复,您需要做的主要事情是调整渐变中的颜色停止:

重复你的梯度停止两次。(这使渐变的结尾看起来像开始,允许在动画的每个重复之间平滑过渡。)
重复你的第一次梯度停止在最后。(这使得最后一站与第一站混合。)

您还需要调整关键帧,使它们朝您想要的方向移动(请参见下面的代码)。

.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>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

Mass · 如何在Tailwind CSS v4中创建配置

5 月前

magenta placenta · 将css变量合并为一个变量

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前