如何在CSS和HTML中添加颜色转换，就像在Instagram应用程序的登录区域中一样

Question

我想把彩虹色的变化和过渡添加到我正在制作的网站的背景中。我似乎无法让它发挥作用，谷歌搜索也没有多大帮助。任何意见都将不胜感激。

Answer 1

#hi {
  background: rgb(250, 100, 100);
  border: 0;
  transition: background 2s ease-out;
}
#hi:hover {
  /*background: rgb(200, 100, 250);*/
  background: rgb(100, 100, 250);
}

<button id="hi">.............
  <br>.............
  <br>.............</button>

所以在上面的代码中，我只制作了一个按钮，它由一堆句点组成一个框。然后在CSS中，您应该只执行常规的"添加转换内容"，但也应该在末尾添加ease-out，这会在转换的某些部分产生一点拉力。在:hover部分，您可以选择任何您想要的颜色。

Answer 2

您可能需要在css中使用@keyframe animation工具。示例：

.element {
  animation: pulse 5s infinite;
}
@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}