[英]Changing navbar color with css transition
Is there a transition that changes navigation bar color every 30 seconds? 是否有每30秒更改导航栏颜色的转换? Here is what I have tried so far:
这是我到目前为止所尝试的:
.navbar {
background-color: #080;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
Using CSS3
Animation, you can do it. 使用
CSS3
动画,你可以做到。
Example code given below changes colour approximately after 30 seconds and switches between different colours. 下面给出的示例代码大约在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>
Use a timeout like that : 使用这样的超时:
$(elem).css('z-index','0');
setTimeout(function(){ $(elem).css('z-index','2'); },2000)
Source : jQuery change CSS after a certain amount of time 来源: jQuery在一段时间后改变CSS
That is called an animation. 这叫做动画。 Try this:
尝试这个:
.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 }
}
If you want it to not change gradually then put inside of the @keyframes something like this: 如果你想让它不逐渐改变,那么把@keyframes放在这里:
49% { background-color: black }
And change it to the color at 0% and also you can put that for 99% and keep 99% at the same color as 50%. 并将其更改为0%的颜色,也可以将其设置为99%,并将99%保持在与50%相同的颜色。 This keeps it the same color until 1% before and then it will change during that 1% instead of that 50% range.
这使它保持相同的颜色直到1%之前,然后它将在1%而不是50%范围内变化。
* { 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.