使用 css 过渡更改导航栏颜色答案

【问题标题】：Changing navbar color with css transition使用 css 过渡更改导航栏颜色
【发布时间】：2017-07-08 05:59:22
【问题描述】：

是否有每 30 秒更改一次导航栏颜色的过渡？到目前为止，这是我尝试过的：

.navbar {
    background-color: #080;
    -webkit-transition: background 1s;
    -moz-transition: background 1s;
    -o-transition: background 1s;
    transition: background 1s;
}

【问题讨论】：

@CRover 你听说过动画吗？

标签： html css twitter-bootstrap css-transitions navbar

【解决方案1】：

使用CSS3动画，你可以做到。

下面给出的示例代码大约在 30 秒后改变颜色并在不同颜色之间切换。

#navbar {
   background-color: #080;
   width: 100%;
   height: 100px;
    animation: changeColour 190s linear 2s infinite alternate;
}

@keyframes changeColour {
  0%,
  15% {
background-color: #080;
  }
  16%,
  30% {
background-color: #F98A01;
  }
  31%,
  45% {
background-color: #C61F83;
  }
  46%,
  60% {
background-color: #DE9914;
  }
  61%,
  75% {
background-color: #1EB6DC;
  }
  76%,
  90% {
background-color: #0060A1;
  }
  91%,
  100% {
background-color: #080;
  }
}

&lt;div id="navbar"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

  * {
  padding: 0;
  margin: 0;
}

div {
  position: fixed;
  width: 100vw;
  height: 20vh;
  animation: changecolor 300s infinite ease-in-out;
}

@keyframes changecolor {
  0%,
  9% {
    background-color: black;
  }
  10%,
  19% {
    background-color: blue;
  }
  20%,
  29% {
    background-color: red;
  }
  30%,
  39% {
    background-color: green;
  }
  40%,
  49% {
    background-color: cyan;
  }
  50%,
  59% {
    background-color: magenta;
  }
  60%,
  69% {
    background-color: yellow;
  }
  70%,
  79% {
    background-color: lightblue;
  }
  80%,
  89% {
    background-color: pink;
  }
  90%,
  99% {
    background-color: lightgreen;
  }
  100% {
    background-color: black;
  }

&lt;div class="navbar"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

这就是所谓的动画。试试这个：

.navbar {
    -webkit-animation-name: changeColorAnim;
    animation-name: changeColorAnim;
    -webkit-animation-duration: 90s;
    animation-duration: 90s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes changeColorAnim {
    0% { background-color: black }
    50% { background-color: white }
    100% { background-color: black }
}

@keyframes changeColorAnim {
    0% { background-color: black }
    50% { background-color: white }
    100% { background-color: black }
}

如果你不希望它逐渐改变，那么在@keyframes 中添加如下内容：

49% { background-color: black }

并将其更改为 0% 的颜色，您也可以将其设置为 99%，并保持 99% 与 50% 的颜色相同。这使它保持相同的颜色直到 1% 之前，然后它会在 1% 而不是 50% 的范围内发生变化。

【讨论】：

我希望它在这些颜色之间不断切换#F98A01、#C61F83、#DE9914、#1EB6DC、#0060A1，我该怎么做？
抱歉回复晚了，以防万一您还想知道，或者其他人有同样的问题，您将代码从黑色或白色更改为“背景颜色： #C61F83;"并且还通过更改/添加更多百分比而不是 0%、50% 和 100% 来表示 0%、20%、40%，并添加 60%、80%、100% 以满足您的 5 种颜色需求（100% 和0% 需要相同的颜色）。

【解决方案4】：

使用这样的超时：

$(elem).css('z-index','0');
setTimeout(function(){ $(elem).css('z-index','2'); },2000)

来源：jQuery change CSS after a certain amount of time

【讨论】：