css3 はバーのパーセント効果を実現します

今回はcss3でバーパーセント効果を実現する方法をお届けします。css3を実装してバーパーセント効果を実現する際の注意事項は何ですか。以下は実際的なケースです。

レンダリングはバー全体が100%を表し、バー上にマウスを移動すると、アイテムの割合が表示されます(タイトル属性の設定)

まず第一に。 、この割合、あなたはそれを把握する必要があります。
このバーを表示するにはラベルを使用します。
背景を設定するだけです。どのコンテナを使用するかは固定されておらず、独自のレイアウトのニーズによって異なりますが、確かなことの 1 つは、コンテナの幅を設定する必要があるということです。 背景のコードを設定します
カラー次を入力します: background:linear-gradient(to right, green 33.90%, #9e9e9e70 33.90%)
linear-gradientは線形グラデーションを表し、3つのパラメータ設定、最初のパラメータは左への方向です:

右から左へのグラデーションを設定します。同等: 270deg

右へ:
左から右へのグラデーションを設定します。同等: 90deg
上へ:
下から上へのグラデーションを設定します。以下に相当: 0deg
下へ:
上から下へのグラデーションを設定します。相当：180度これはデフォルト値であり、空白のままにするのと同じです。

明らかに、2 つの色の場合、色の値の後に色のパーセンテージが続きます。そうでない場合は、2 つの色の線形グラデーションが発生します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他の関連記事に注目してください。

推奨読書:

css3の影の詳しい解説

JavaScript配列の使い方集

JavaScriptで見落としがちな知識ポイント

Canvasを使って星空、月を描く方法、地球、テキストを追加

以上がcss3 はバーのパーセント効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。