I am looking to create a dynamic colored bar with a moving color gradient effect. Without using JavaScript, I want to achieve this effect using CSS 3 properties such as gradients and animations.
This is a snippet of what I have tried so far:
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... /* Gradient color stops */
}
1% {
background: -moz-linear-gradient(left, #EEFFEE 0%, #FFFFFF 1%, #EEFFEE... /* Gradient color stops */
}
2% {
background: -moz-linear-gradient(left, #DDFFDD 0%, #EEFFEE 1%, #FFFFFF ... /* Gradient color stops */
}
/* More animation keyframes go here */
}To be continued...
Surprisingly, my initial attempt was successful in creating the desired effect. However, the script generated is too large and impractical for use. I am open to exploring more efficient methods to achieve this effect.