CSS3の機能だけを使用して、div内で左から右に無限にグラデーションを移動することは可能でしょうか?すべてのブラウザをサポートする必要はありません。実験したいだけです。 この例は、青い進捗バーの上に光沢のあるエフェクトです。例が分かります。Windows 7のようなプログレスバーでグラデーションを無限に動かす
このCSSを使用
10
A
答えて
25
あなたは(マイケルさんのコメントにlinkに基づいて)勾配は無限に移動させることができます:
.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's linkを参照して、さらにCSSをコピーしてください。
編集:私はそれを完璧にしなければなりませんでした。 CSS3のほぼ完全なWindowsの進捗バーについては、新しいデモをご覧ください:)
+0
http:// www。 useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/ – Pentium10
関連する問題
- 1. プログレスバーは無期限
- 2. Windows 7のようにアプリケーションを最小限にする
- 3. レジストリのRUNASADMINがWindows 7で動作しないようです
- 4. WPF Windows 7でリムーバブルメディアの自動実行を無効にする
- 5. WinFormsで無限のプログレスバーを作成するにはどうすればよいですか?
- 6. Windows 7のようなフォームを作成するDevExpressでファイルを移動する
- 7. Windows IIS 7でRuby on Railsをどのように再起動しますか?
- 8. AppLockerはWindows 7のようなWindows 7,8の8.1でCSPをサポートしますか?
- 9. Windowsの起動(Windows 7)で管理者権限を必要とするアプリケーションを自動的に実行できないのはなぜですか?
- 10. Windows 7のWCFなぜ動作しないのですか?
- 11. Windowsボタンのないプログレスバー
- 12. Windows Phone 7でシングルタップイベントなしでダブルタップイベントを起動するにはどうすればよいですか?
- 13. Windows Phone 7の自動ロックから画面を無効にする
- 14. Windows Phone 7でBINGマップの検索を国に制限する
- 15. JDK 7 Windows 7自動インストール
- 16. Windows 7で動作しないHttp Post
- 17. 権限に関係なく、WindowsフォームアプリケーションがWindowsサービスを再起動できるようにするにはどうすればよいですか?
- 18. Windows Phone 7のリストボックス項目を無効にしますか?
- 19. Windows 7で管理者権限でJava jarを起動する方法
- 20. Windows Phone 7でListBoxes/ScrollViewerのオーバースキャンエフェクトを無効にする方法
- 21. Windows Phone 7 URLに移動
- 22. 権限昇格Windows 7の場合?
- 23. どのように無限のjscrollpaneを作成しますか?
- 24. GritはWindows 7でもうまく動作しますか?
- 25. OnStart()メソッドの無限ループのため、Windowsサービスは常に「起動中」です
- 26. IE 7&8(グラデーション+ボーダー半径)
- 27. cssでwindows 7のタスクバーのようにぼかしを作成しますか?
- 28. Windows Phone 7で別のクラスライブラリ内のページに移動するにはどうすればよいですか?
- 29. Windowsフォームで「シャープ」なグラデーションを作成するには?
- 30. Windows 7でJADEを起動する
この投稿はあなたにインスピレーションを与えるかもしれませんhttp://www.alldesignstuffs.com/2011/creating-css3-animation-using-css3-gradient- and-background-cliptext/ –
私はこれもあなたの質問に対する答えだと思う:http://stackoverflow.com/questions/25554852/moving-gradient-bar-in-css/25554853#25554853 –