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

2023年12月12日 387次阅读

是否有每30秒更改导航栏颜色的转换？

这是我到目前为止所尝试的：

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

最佳答案 使用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>
点赞