0

Web ページに簡単なプログレス バーを作成しようとしています。次のようにコードをセットアップしました。

<div class="progress">
  <p class="info">Some nice info</p>
  <div class="update-progress">
    <div class="update-progress-bar animate" style="width: 40%"></div>
</div>

そして私のcssは次のようになります：

.progress {
    position: relative;
    margin: 20px -20px -20px;
    padding: 15px;
    background: #fafafa;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-radius: 0 0 6px 6px;
    background-image: -webkit-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
    background-image: -moz-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
    background-image: -o-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
    background-image: linear-gradient(to bottom, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
    box-shadow: inset 0 1px white;
    line-height: 21px;
    color: #999;
    text-shadow: 0 1px white;
}
.progress .info {
    line-height: 16px;
    font-size: 11px;
    text-align: center;
}
.progress .update-progress {
    clear: left;
    margin-top: 5px;
    /*margin: 12px 10px 4px;*/
    height: 8px;
    padding: 3px;
    background: #ebebeb;
    border-radius: 7px;
    box-shadow: inset 0 2px 3px #000000, 0 1px white;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px white;
}
.progress .update-progress-bar {
    height: 100%;
    background: #73c822;
    border: 1px solid;
    border-color: #6eb626 #62a21f #5a9122;
    border-radius: 4px;
    box-sizing: border-box;
    background-image: -webkit-linear-gradient(top, #73c822, #67aa24);
    background-image: -moz-linear-gradient(top, #73c822, #67aa24);
    background-image: -o-linear-gradient(top, #73c822, #67aa24);
    background-image: linear-gradient(to bottom, #73c822, #67aa24);
    box-shadow: inset 0 1px rgb(255, 255, 255);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
    /*ANIMACJA*/
    -moz-transition: width .5s ease-in-out;
    -o-transition: width .5s ease-in-out;
    -webkit-transition: width .5s ease-in-out;
    transition: width .5s ease-in-out;
}
.progress .animate {
    content:"";
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    z-index: 1;
    background-size: 50px 50px;
    -moz-animation: move 2s linear infinite;
    -o-animation: move 2s linear infinite;
    -webkit-animation: move 2s linear infinite;
    animation: move 2s linear infinite;
    overflow: hidden;
}
@-webkit-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}
@-moz-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}
@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

これにより、次のような進行状況バーがあります: ここに画像の説明を入力
私のコードはここから入手できます: http://jsfiddle.net/Misiu/BhRtQ/

今やりたいことは、IE9に対応させることです。

グラデーションにはCSS3PIEを使用する予定ですが、その進行アニメーションを行う方法がわかりません。

これをIE9で見栄え良くするにはどうすればよいですか？
私の最初のアイデアは、IE9 でアニメーション gif を背景として使用することでしたが、これは外部画像なしで完全に作成できるのでしょうか?

CSS3Pie の背景をアニメーション化できますか?

編集:これ
が私の一時的なバージョンです: http://jsfiddle.net/Misiu/BhRtQ/9/
jQuery animate を使用して背景位置をアニメーション化しています。

4

1 に答える 1

1

正直なところ、CSS3Pie がここで良い体験を提供するとは思えません。

それは確かに動的に制御できます -- CSS3Pie ホームページは、効果を切り替えることを可能にすることによってこれの証拠を提供します.

問題は、アニメーションが単に効果のオンとオフを切り替えるよりもはるかに複雑であることです。アニメーション化するには、ブラウザーが各フレームをすばやく連続してレンダリングする必要があります。

CSS3Pie でアニメーション化を試みたことはありません。それは可能だと思いますが、CSS アニメーションと組み合わせて動作することはありません。また、ブラウザのパフォーマンスを完全に犠牲にすることにも賭けたいと思います。

CSS3Pie はスポット効果には優れていますが、ページで頻繁に使用するとパフォーマンスの問題が発生することが知られています。ブラウザーが 1 秒間に何度も CSS3Pie エフェクトを再処理しなければならない場合、それは間違いなく私の「大量」の定義に当てはまります。

古いブラウザーに無地のフォールバックを提供するだけで、はるかに良いと思います。グラデーション効果は素晴らしいですが、そのためにブラウザーのパフォーマンスをそれほど犠牲にする価値はありません (特に、要点はプログレス バーを表示することであるため、取得できるすべてのブラウザー パフォーマンスが明らかに必要です)。

IE9 のみをサポートする必要がある場合は、背景に SVG 画像を使用することで、CSS3Pie を使用せずにこのような背景効果を実現できます。これはデータ URL として CSS コードに含めることができ、IE9 のフォールバック ソリューションとしてプレーンな CSS で非常にうまく機能します。適切なコードを提供できるジェネレーター ツールについては、こちらを参照してください。

このソリューションの良い点は、純粋な CSS であるため、既存のアニメーションと完全に連携することです。つまり、基本的には単なる背景画像なので、画像を移動するアニメーションは機能します。はい、これは画像ですが、CSS の外部にあるわけではないため、条件を満たしていることを願っています。(もちろん、データ URL として PNG 画像を使用してこれを行うこともできますが、SVG の方がおそらく優れているでしょう)

もちろん、これはIE8では機能しませんが、質問でIE9を指定しました。IE8 のサポートが必要な場合、またはデータ URL ソリューションが気に入らない場合は、フォールバックとして無地の背景色を使用することをお勧めします。

于 2013-11-25T12:07:48.483 に答える