CSS 評価効果の星の例

何？何のスターコートですか？さて、もっとわかりやすくするために写真を見てみましょう。

よく見ると、パターンが見つかります。強調表示された星の数は、パーセンテージ/スコアに応じて動的に変更されます。

ステップバイステップの図:

1 つの星が 1 ポイントの価値があり、半分の星がない (またはある場合は、半分の星のクラス名を追加する) 状況に遭遇した場合、複数の構造を追加することでこの効果を実現できます。

しかし、星にもグラデーション効果が必要であることを考えると、私はデザイナーに相談しに行くところだった（もちろん、グラデーションなしに変更するように頼むため）。

しかし、実際にそこまでやると、あまりにも非専門的だと思われるでしょう。見栄えの良い効果も得られないのに、それをフロントエンドと呼ぶことに何の意味があるのでしょうか?

座ってデザイン案を見てみましょう。

このように直接見ると、何も思いつかないかもしれませんが、別の方法で考えることができます。

まず、次の効果を達成する方法について考えてみましょう。

どうですか？これを読んで、スター効果を実現する方法について何かアイデアは浮かびましたか？！はい、解散です。

ハハハ、でも、なくても大丈夫です。まずはこのプログレスバーの実装を見てみましょう。それから私は彼からアイデアを探しました (これは私が開発していたときのアイデアで、非常に愚かで「実用的」です):

構造は次のとおりです。

構造は非常にシンプルで、メインのコアコードは次のとおりです。

<div class="grade-progress-bg">
    <div class="grade-star-gradual">
        <span class="progress" style="width: 50%;"></span>
    </div>
</div>

構造モデルを直接見ると、対応する効果がより明確になります。

図に示すように、

このうち、div.grade-star-gradual は灰色の背景バーを担当します。

span.progressは色付きのプログレスバーを担当します

Div.grade-progress-bg は、2 つを折り返して、右側の 100% テキストに揃える役割を担います。

span.progress のパーセンテージ幅は、灰色のバーの比率を占めることでデータのパーセンテージをシミュレートするために使用されます。非常に単純なようです。

色付き星の実装:

この考え方を使用すると、色付きのプログレスバーと色付きの星のプログレスバーの違いは、実際には星です（これもナンセンスです）

しかし、重要な考え方は、星を進捗状況バーとして考えないことです。

つまり、星評価は一般的なプログレスバー効果と同じ方法で実装されます。唯一の違いは星の有無です。

では、通常の進捗バーに星を追加するにはどうすればよいでしょうか?私のデザイン専攻は今でもインスピレーションを与えてくれます。

カラフルなプログレスバーを中空の星のパターンで覆うと、見えるものはすべて星になるのではないでしょうか。！

例えば：

実際の進行状況バーは次のようになります。

ゴージャスなコートを着ると、次のようになります。

またいい買い物をした気がしませんか？

コードのデザインは、前のプログレスバーと同じです。背景色は最初は灰色で、星は上部に 5 つの小さな灰色の星です。

価値のあるデータがある場合、カラーバーspan.progressの幅をパーセンテージに変更すると、星の数の視覚的な変化を実現できます。

構造的にはプログレスバーと一致していますが、この中空の星の「外套」のために、span の弟分として空の構造を追加しました。疑似クラスを使用して自由に操作することもできます。

<div class="grade-progress-box">
    <div class="grade-star-bg">
      <div class="grade-star-gradual">
        <span class="progress" style="width: 100%;"></span>
        <div class="grade-star-img bgsize"></div>//中空の星の画像</div>
   </div>
    <div class="grade-number grade-number1">5 ポイント</div>
</div>

しかし、「上着が適切に着用されている」こと、つまり、仕立てがよく、露出が多すぎないことを確認する必要があります。

中空の星の周りの色は、進行状況バーの周りの色とブレンドする必要があります。ブレンドしやすいように、ここでは白を使用しました。

最後に、表示に使用されるパーセンテージとポイントは、 Vue の構文を使用して簡単にバインドして表示できます。

左から右への動的な塗りつぶし効果については、CSS トランジションを使用して幅の変化を監視するだけです。

通常の進捗バー

.grade 進捗ボックス

  .grade-progress-bg

    .grade-star-gradual #[span.progress(:style="{width: (Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(0) + '%'}")]

  .grade-number {{(Number(DBData.Inv)*100>100?100:Number(DBData.Inv)*100).toFixed(2)}}%

スタイル

成績進捗ボックス:後{

    コンテンツ： "";

    表示: ブロック;

    クリア: 両方;

    可視性: 非表示;

    オーバーフロー: 非表示;

  } 

  .grade-progress-bg {

    表示: テーブルセル;

    垂直位置合わせ: 中央;

    幅: 4.3rem;

    高さ: .14rem;

    オーバーフロー: 非表示;

  }

  .grade-star-gradual {

    高さ: 0.16rem;

    -webkit-border-radius: .15rem;

    境界線の半径: .15rem;

    オーバーフロー: 非表示;

    背景: #e5e5e5;

  }

  .grade-star-gradual span.progress {

    幅: 0;

    高さ: 100%;

    表示: ブロック;

    -webkit-border-radius: .15rem;

    境界線の半径: .15rem;

    -webkit-transition: 幅 1s イーズアウト;

    -o-transition: 幅 1s のイーズアウト;

    遷移: 幅 1 秒のイーズアウト;

    背景: -webkit-gradient(linear, 左上, 右上, from(#f23f5c), to(#fea94e));

    背景: -o-linear-gradient(左、#f23f5c、#fea94e 100%);

    背景: 線形グラデーション(右へ、#f23f5c、#fea94e 100%);

    背景: -webkit-linear-gradient(左、#f23f5c、#fea94e 100%);

  }

星の進捗バー

.grade 進捗ボックス

  .grade-star-bg

    .grade-star-gradual #[span.progress(:style="{width: (DBData.Sat/5*100).toFixed(0) + '%'}")]

      .grade-star-img

  .grade-number.grade-number1 {{DBData.Sat}} ポイント

スタイル

.grade-star-bg {

    位置: 相対的;

    表示: テーブルセル;

    幅: 4.46rem;

    高さ: .5rem;

    オーバーフロー: 非表示;

    右マージン: .22rem;

    垂直位置合わせ: 中央;

  }

  .grade-star-gradual {

    高さ: 0.16rem;

    -webkit-border-radius: .15rem;

    境界線の半径: .15rem;

    オーバーフロー: 非表示;

    背景: #e5e5e5;

  }

  .grade-star-bg .grade-star-gradual {

    高さ: 100%;

  }

  .grade-star-img {

    位置: 絶対;

    上: 0;

    左: 0;

    幅: 100%;

    高さ: 100%;

    背景: url(data:image/png;base64,) 繰り返しなし;

    -webkit-background-size: 100% 100% !重要;

    背景サイズ: 100% 100% !重要;

  }

はい、もう一つ完成しました。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: 実行中のDockerコンテナのポートマッピングを変更する方法

>>: 初心者がHTMLタグを学ぶ（1）