css3でプログレスバーを実装するにはどうすればよいですか? css3でのプログレスバーの実装方法の紹介

プログレスバーは、Web ページでよく使用されます。アップロードやダウンロードなどのプロセスはすべてプログレス バーの形式で表示されます。次に、この記事で CSS3 でプログレス バーを実装する方法を説明します。興味のある方は参考にしてください。 。

以前は、プログレスバーの効果を実現するにはJavaScriptを使用する必要がありましたが、CSS3の登場により、div内でアニメーションを実行したり、グラデーションやカラー要素を追加したりできるようになりました。以下で CSS3 がどのようにプログレスバーを実装するかを詳しく見てみましょう。

css3 でアニメーション アニメーション コントロールを使用すると、プログレス バーの効果を実現できます。

アニメーションに関連する内容を簡単に見てみましょう。 構文: アニメーション: 名前、期間、タイミング関数、遅延。反復回数の方向 ;

パラメータ:

animation-name: セレクターにバインドする必要があるキーフレーム名を指定します。 。

animation-duration: アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。

animation-timing-function: アニメーションの速度カーブを指定します。

animation-delay: アニメーションが開始されるまでの遅延を指定します。

animation-iteration-count: アニメーションを再生する回数を指定します。

animation-direction: アニメーションを逆方向に順番に再生するかどうかを指定します。

次に、単純な css3 プログレス バーのサンプル コードを見てみましょう:

<div class="progress">
    <!--进度条-->
    <div class="loader-container"></div>
</div>

<!--Css3 实现。 animation 动画控制--> 
    html,body{
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    .loader-container {
        height: 100%;
        width: 55%;
        background: -webkit-linear-gradient(left,#f8dc4b,#d95a3d);
        border-radius:7px;
        box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
        animation: loader 1s linear;
    }
    .progress{
        width: 70%;
        height: 15px;
        border-radius:7px;
        margin-left: 15%;
        margin-top: 30%;
        background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4);
    }
    @keyframes loader {
        0% {
            width: 0%;
        }
        100% {
            width: 55%;
        }
    }

css3 プログレス バーの実装効果は次のとおりです:

上記はこの記事の全内容です。上で使用したさまざまな css3 プロパティの詳細については、css3 学習マニュアルを参照してください。

以上がcss3でプログレスバーを実装するにはどうすればよいですか? css3でのプログレスバーの実装方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。