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

Question

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

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

Answer 1

使用这样的超时：

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

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

Answer 2

那叫作动画。试试这个：

.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% 范围内发生变化。

Answer 3

使用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;
  }
}

<div id="navbar"></div>

Answer 4

  * {
  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;
  }

<div class="navbar"></div>

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

Changing navbar color with css transition

html

css

navbar

css-transitions

twitter-bootstrap