Есть ли переход, который меняет цвет навигационной панели каждые 30 секунд? Вот что я пытался до сих пор:Изменение цвета навигатора с переходом css
.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>Используйте тайм-аут, как что:
$(elem).css('z-index','0');
setTimeout(function(){ $(elem).css('z-index','2'); },2000)
Это называется анимация. Попробуйте это:
.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, как я могу это сделать? – stephjhonny
Извините за поздний ответ, на всякий случай, если вы все еще хотите знать, или для других людей с тем же вопросом, вы измените код, указав черный или белый, на «background-color: # C61F83;» а также путем изменения/добавления дополнительных процентов, а не 0%, 50% и 100%, чтобы сказать 0%, 20%, 40% и добавить 60%, 80%, 100%, чтобы соответствовать вашей 5-кратной потребности (100% и 0% требуется одного цвета). –
* {
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>
@CRover вы когда-нибудь слышали об анимации? – Banzay