Question

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

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

Answer 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;
  }
}

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

Answer 2

使用类似的超时：

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

来源：stackoverflow: ffmpeg conversion to mpeg2video

Answer 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％的范围内发生变化。

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

使用css转换更改导航栏颜色

4 个答案: