Verschieben der Verlaufsleiste in CSS

Question

Aug 28, 2014, 07:40 PM

Verschieben der Verlaufsleiste in CSS

Ich hätte gerne einen farbigen Balken, durch den sich eine andere Farbe bewegt. Es sollte so aussehen, wenn sich der weiße Teil bewegt:

Ich dachte über etwas mit Farbverlauf und der Anmeldungs-Eigenschaft von CSS 3 nach.Ich nicht will JS benutzen! Ich habe so etwas ausprobiert:

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 */
}

Fortsetzung folgt...

Ob Sie es glauben oder nicht, es funktioniert! Ich habe ein Skript geschrieben, das diese Zeilen generiert. Aber es ist riesig, größer als ein Bild, daher nicht verwendbar.

Ich hoffe, Sie finden bessere Wege.