如何在 CSS 和 HTML 中添加颜色过渡，就像 Instagram 应用程序登录区域中的那样？

Question

我想将 rainbow-y 颜色变化和过渡添加到我正在制作的网站的背景中。我似乎无法让它工作，谷歌搜索也没有太大帮助。任何输入将不胜感激。

Answer 1

您可能想使用 css 中的 @keyframe animation 工具。示例：

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

Answer 2

#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 中，你应该只做常规的 "add the transition stuff"，但你也应该在末尾添加 ease-out，这给了一点拉动在过渡的某些部分。在 :hover 部分，您可以选择任何颜色。

如何在 CSS 和 HTML 中添加颜色过渡，就像 Instagram 应用程序登录区域中的那样？

How to add a color transitions in CSS and HTML like the one in the login area of the Instagram app?

html

css

css-transitions

instagram