Перемещение панели градиента в CSS
Я хотел бы иметь цветную полосу с другим цветом, перемещающимся через эту полосу. Это должно выглядеть следующим образом: белая часть движется:
Я думал о чем-то с градиентом и свойством anmiation CSS 3.Я не хочу использовать JS! Я попробовал что-то вроде этого:
HTML:
<body>
<div class="navbar_line"></div>
</body>
CSS:
.navbar_line {
animation: gradient 5s linear infinite;
}
@-webkit-keyframes gradient
{
0% {
background: -moz-linear-gradient(left, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* FF3.6+ */
background: -webkit-linear-gradient(, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* IE10+ */
background: linear-gradient(to right, #FFFFFF 0%, #EEFFEE 1%, #DDFFDD 2%, #BBFFBB 4%, #AAFFAA 5%, #99FF99 6%, #88FF88 7%, #77FF77 8%, #66EF66 9%, #55DF55 10%, #44CE44 11%, #33BD33 12%, #22AC22 13%, #119B11 14%, #008A00 15%, #008A00 86%, #119B11 87%, #22AC22 88%, #33BD33 89%, #44CE44 90%, #55DF55 91%, #66EF66 92%, #77FF77 93%, #88FF88 94%, #99FF99 95%, #AAFFAA 96%, #BBFFBB 97%, #CCFFCC 98%, #DDFFDD 99%, #EEFFEE 100%); /* W3C */
}
1% {
background: -moz-linear-gradient(left, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* FF3.6+ */
background: -webkit-linear-gradient(, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* IE10+ */
background: linear-gradient(to right, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE 2%, #DDFFDD 3%, #BBFFBB 5%, #AAFFAA 6%, #99FF99 7%, #88FF88 8%, #77FF77 9%, #66EF66 10%, #55DF55 11%, #44CE44 12%, #33BD33 13%, #22AC22 14%, #119B11 15%, #008A00 16%, #008A00 87%, #119B11 88%, #22AC22 89%, #33BD33 90%, #44CE44 91%, #55DF55 92%, #66EF66 93%, #77FF77 94%, #88FF88 95%, #99FF99 96%, #AAFFAA 97%, #BBFFBB 98%, #CCFFCC 99%, #DDFFDD 100%); /* W3C */
}
2% {
background: -moz-linear-gradient(left, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* FF3.6+ */
background: -webkit-linear-gradient(, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* IE10+ */
background: linear-gradient(to right, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF 2%, #EEFFEE 3%, #DDFFDD 4%, #BBFFBB 6%, #AAFFAA 7%, #99FF99 8%, #88FF88 9%, #77FF77 10%, #66EF66 11%, #55DF55 12%, #44CE44 13%, #33BD33 14%, #22AC22 15%, #119B11 16%, #008A00 17%, #008A00 88%, #119B11 89%, #22AC22 90%, #33BD33 91%, #44CE44 92%, #55DF55 93%, #66EF66 94%, #77FF77 95%, #88FF88 96%, #99FF99 97%, #AAFFAA 98%, #BBFFBB 99%, #CCFFCC 100%); /* W3C */
}
продолжение следует...
Верьте или нет, это работает! Я написал скрипт, который генерировал эти строки. Но он огромен, больше, чем картинка, поэтому не может быть использован.
Я надеюсь, вы найдете лучшие способы.