css - Windows 7 のように進行状況バーでグラデーションを際限なく移動させる

Question

CSS3 機能のみを使用して、div 内でグラデーションを左から右に際限なく移動させることは可能でしょうか? すべてのブラウザーをサポートする必要はありません。実験したいだけです。例として、青い進行状況バーの上にある光沢のある効果があります。例をいただければ幸いです。

Answer 1

この CSS を使用すると、グラデーションを際限なく移動させることができます ( 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;
    }
}​

デモ: http://jsfiddle.net/jhogervorst/X78qN/2/

これは、WebKit ベースのブラウザー (Safari や Chrome など) でのみ機能します。他のブラウザーでも機能させるには、Michael のリンクを参照して、さらに CSS をコピーしてください。

編集：完璧にする必要がありました。CSS3 のほぼ完璧な Windows プログレス バーの新しいデモをご覧ください :)