ホームページ > 記事 > ウェブフロントエンド > css3 はバーのパーセント効果を実現します
今回はcss3でバーパーセント効果を実現する方法をお届けします。css3を実装してバーパーセント効果を実現する際の注意事項は何ですか。以下は実際的なケースです。
レンダリングはバー全体が100%を表し、バー上にマウスを移動すると、アイテムの割合が表示されます(タイトル属性の設定)まず第一に。 、この割合、あなたはそれを把握する必要があります。
このバーを表示するにはラベルを使用します。
背景を設定するだけです。どのコンテナを使用するかは固定されておらず、独自のレイアウトのニーズによって異なりますが、確かなことの 1 つは、コンテナの幅を設定する必要があるということです。 背景のコードを設定します
カラー次を入力します: background:linear-gradient(to right, green 33.90%, #9e9e9e70 33.90%)
linear-gradientは線形グラデーションを表し、3つのパラメータ設定、最初のパラメータは左への方向です:
右へ:
左から右へのグラデーションを設定します。同等: 90deg
上へ:
下から上へのグラデーションを設定します。以下に相当: 0deg
下へ:
上から下へのグラデーションを設定します。相当:180度これはデフォルト値であり、空白のままにするのと同じです。
その他の関連記事に注目してください。
推奨読書:Canvasを使って星空、月を描く方法、地球、テキストを追加
以上がcss3 はバーのパーセント効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。