Mi chiedo se è possibile effettuare una sfumatura di spostamento all'interno di un div da sinistra a destra infinitamente utilizzando solo le funzionalità CSS3? Non è necessario supportare tutti i browser, voglio solo sperimentare. L'esempio è quell'effetto lucido sulla parte superiore della barra di avanzamento blu. Un esempio è apprezzato.Fai qualche gradiente di movimento all'infinito in una barra di avanzamento come in Windows 7
Usando questo CSS si può lasciare una mossa gradiente all'infinito (basato sul link nel commento di Michael):
.bar {
background: -webkit-linear-gradient(left , #0193CD 30%, #66D4E5 80%, #0193CD 100%) repeat;
-webkit-background-size: 50% 100%;
-webkit-animation-name: moving-gradient;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes moving-gradient {
0% {
background-position: left bottom;
}
100% {
background-position: right bottom;
}
}
Demo:http://jsfiddle.net/jhogervorst/X78qN/2/
Questo funziona solo in WebKit browser basati su browser (ad esempio, Safari e Chrome). Per farlo funzionare anche con altri browser, vedi Michael's link e copia altri CSS.
Modifica: Ho dovuto renderlo perfetto. Guarda la nuova demo per una barra di avanzamento Windows quasi perfetta in CSS3 :)
http: // www. useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/ – Pentium10
Questo post potrebbe darti qualche ispirazione http://www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient- e-background-cliptext/ –
Penso che questa sia anche una risposta alla tua domanda: http://stackoverflow.com/questions/25554852/moving-gradient-bar-in-css/25554853#25554853 –