一般的な五芒星の評価とスコアを達成するために、純粋なCSSは、インタラクティビティのウェブサイトを実証します

その他 2020-03-19 09:30:13 訪問数: null

最近、スコアとスコア表示モジュールに関連するプロジェクトを行うために、UI設計者は、いくつかの良い写真をカット五芒星の評価方法の多くを実現し、愛の精神の本質とパフォーマンスとメンテナンスの容易さの投げ追求を考え、収集しなければなりませんそして多くの方法を試みた、純粋なCSS実装と完了率のファイナル・ドライブは、この中で、維持するために何の判定ロジックを意味していない機能、ノーJSのスコア、エラーコードの少ないチャンス、と簡単に表示し、この機能は、記録処理を可能にし、共有し、交流と一緒に学びます。

オリジナルは、（私のGitHubがブログに含まhttps://github.com/jawil/blogを）あなたが最新の開発に集中できるように、誰もが共通の進捗状況について話すことができ、。

五芒星を達成するために

1.画像やフォント、アイコン

その後、直接デザイナーのPNGまたはJPGが良くなっに対する究極のパフォーマンスの追求、または直接は、base64に変換されません。

2：使用Fontawesomeアイコンライブラリ、実際には、単にベクトルフォント。

HTML：

<div class="icon"></div>

CSS：

@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

.icon:before {
    content: '\f005';
    font-family: FontAwesome;
}

オンラインプレビュー住所

3.使用しCSS3は、パッチワークの五芒星を描いています。

基本原理：透明透明見えないステッチを使用すると、通常の五芒星を変換する変換。

HTML：

<div class="star-five"></div>

CSS：

.star-five{
width: 0;
height: 0;
color: red;
margin: 50px 0;
position: relative;
display: block;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
transform:rotate(35deg);
}

.star-five:before{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid red;
position: absolute;
top: -45px;
left: -65px;
color: white;
display: block;
content: "";
transform:rotate(-35deg);
}
.star-five:after{
width: 0;
height: 0;
display: block;
position: absolute;
color: red;
top: 3px;
left: -105px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
content: "";
transform:rotate(-70deg);
}

オンラインプレビュー住所

これは、理由はいくつかの便利なメンテナンスの前に変更にではなく、良いとして非常に簡単、色の変化の様子たくさんの悩みを選択した後、推奨されません。

4.記号は五芒直接使用しました

★？

シンプルで、粗、容易に制御、協調製品、★下記の実施の対象。




CSS上のいくつかのセレクタ

JSはもちろん、使用するこの機能の実現のCSSセレクタのいくつかについて、私たちに伝えるために、ここで、強力なCSSセレクタを見逃すことはできない、スコアを制御しません。

強力なCSSセレクタを導入する前に、またとして知られている「シングルボックス技術の明示的および暗黙的要素のCSSラジオ/チェックボックス」、普及する「チェックボックスハック技術を。」

1.checkboxハックテクノロジー

我们使用CSS一些特殊的选择器，然后配合单选框以及复选框自带的一些特性，可以实现元素的显示隐藏效果。然后通过一
些简单的扩展，我们可以不使用任何JavaScript代码实现类似：自定义的单复选框，“更多”展开与收起效果，选项卡切换
效果，或是多级下拉列表效果等等。

相信很多前端开发人员都会遇到boss让修改checkbox和radio样式，毕竟自带的样式太丑了。后来我们发现修改自带样式
并不是那么容易，最后直接使出杀手锏——点击之后替换图片。
今天教大家一种方法，不用替换图片，随意修改样式。还是先看效果图：

`どのような作品についてのトーク：2つの重要なものは、1疑似クラスセレクタ：チェックし、プレゼンテーションのスタイルに対応する制御要素（ラジオボタンやチェックボックス）をチェック、2番目がある+記号隣接兄弟セレクタこのシンボルは、背後に選ば兄弟を示しています。したがって、2つの組み合わせは、それが制御表示または非表示要素の背後にある、または他のスタイルに容易になります。
そして、1つのチェックボックスが選択された選択とされていないようにする方法、それは、ラジオボタンやチェックボックスをオンに対応するアンカー属性のラベルタグカザフスタンは、あり、そして時に対応する単一のチェックここではラベルlabel要素をクリックしてくださいボックスがオンまたはオフされます。次に、上記の効果があります！`

ここで一つだけのラジオボックスのコードを、参照のために：

HTML：

<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

SCSS：

.radio-beauty-container {
    font-size: 0;
    $bgc: green;
    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;
        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}

美しくラジオオンラインプレビュー]チェックボックスアドレス：あなたは私の方法をクリックして
オンラインのプレビュー]チェックボックスのチェックボックスアドレスを美化するために：ああ、私をクリックしてください

より多くの導入と例のこの領域についてはで見つけることができZhangxin徐：この記事の偉大な神CSSラジオ/チェックボックス単一明示的および暗黙的な技術のチェックボックス要素

2.CSS番号セレクタ

HTML：

<div class="wrapper">
  <p class="test1">1</p>
  <p class="test2">2</p>
  <p class="test3">3</p>
  <p class="test4">4</p>
  <p class="test5">5</p>
</div>

CSS：

p{
  width:20px;
  line-height:20px;
  border:1px solid gray;
  text-align:center;
  font-weight: 700;
}
E + F：兄弟セレクタはFの隣接整合素子を選択し、Eの要素は、要素の一致の後方位置に隣接しています。
.test1+p{
  background-color:green;
}

E> Fは：サブF素子一致を選択するセレクタを備え、要素Eは、一致した子要素の要素です。
.wrapper>p{
  background-color:green;
}

E〜F：誰が兄弟の後ろに選択します
.test2~p{
  background-color:green;
}

E :: E、後::前に：選択擬似要素は、要素の適合コンテンツE（フロント）の後に挿入され
.test2::before{
  background-color:green;
  content:"前"
}
.test2::after{
  background-color:green;
  content:"后"
}

：非選択<E>要素の各要素のためではない（E）。
.wrapper>:not(.test2){
  background-color:green;
}

：チェック入力：選択した各入力要素を選択するにチェック。

HTML：

<input type="radio" name="" id="" />

<span>3333</span>

CSS：

input:checked+span{
  border:10px solid red;
}





ここだけ、より強力なCSS3セレクターは、ここで会場については、使用CSSセレクタにこの記事を言及：完全統合CSS3セレクタの使用




実現のスコアリングモジュール

HTML：

 <div class="rating">
        <input type="radio" id="star5" name="rating" value="5" hidden/>
        <label for="star5"></label>
        <input type="radio" id="star4" name="rating" value="4" hidden/>
        <label for="star4"></label>
        <input type="radio" id="star3" name="rating" value="3" hidden/>
        <label for="star3"></label>
        <input type="radio" id="star2" name="rating" value="2" hidden/>
        <label for="star2"></label>
        <input type="radio" id="star1" name="rating" value="1" hidden/>
        <label for="star1"></label>
    </div>

隠されたinputタグについては、長い間、私は隠さ達成するために隠された属性でここにいるようとして、当然のことながら、達成するための多くの方法がありますが、長い入力がOKに表示されない文書の位置を占めるのではなくとしてとして、我々は、ラジオボタンを非表示にする必要があり、非表示にすることができます。あなたの参考のためにいくつかの方法があります。

1.ディスプレイ：なし。

 .rating >input {
        display: none;
    }

クリップの2 CSS3

 .rating >input {
        position: absolute;
        clip: rect(0 0 0 0);
    }

3.opcity

.rating >input {
        position: absolute;
        opacity: 0;
    }

CSS：

    .rating {
        font-size: 0;
        display: table;
    }

    .rating > label {
        color: #ddd;
        float: right;
    }

    .rating > label:before {
        padding: 5px;
        font-size: 24px;
        line-height: 1em;
        display: inline-block;
        content: "★";
    }

    .rating > input:checked ~ label,
    .rating:not(:checked) > label:hover,
    .rating:not(:checked) > label:hover ~ label {
        color: #FFD700;
    }

    .rating > input:checked ~ label:hover,
    .rating > label:hover ~ input:checked ~ label,
    .rating > input:checked ~ label:hover ~ label {
        opacity: 0.5;
    }

オンラインプレビュー住所






表示するスコアリングモジュール

ユーザーが終了スコアリングした後、あなたは5つ星と10ポイントを想定し、スコアが表示され表示されます。

ディスプレイスコアは、比較的簡単な上に明るいスコア以下灰色で、二つの同一のHTML、異なる色の五芒星を入れ、その後、パーセンテージスコアとして表示されます。

HTML：

 <div class="star-rating">
        <div class="star-rating-top" style="width:50%">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="star-rating-bottom">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

CSS：

.star-rating {
        unicode-bidi: bidi-override;
        color: #ddd;
        font-size: 0;
        height: 25px;
        margin: 0 auto;
        position: relative;
        display: table;
        padding: 0;
        text-shadow: 0px 1px 0 #a2a2a2;
    }

    .star-rating span {
        padding: 5px;
        font-size: 20px;
    }
    
    .star-rating span:after {
        content: "★";
    }

    .star-rating-top {
        color: #FFD700;
        padding: 0;
        position: absolute;
        z-index: 1;
        display: block;
        top: 0;
        left: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .star-rating-bottom {
        padding: 0;
        display: block;
        z-index: 0;
    }

インターフェースが返されると、スコアが5点であるとき、割合がライン上で計算限りとして、ちょうどこのダイナミックなプレゼンテーションスタイルに、のみ管理されたデータ、および使用vue.jsデータ駆動型の機能を2つ星半の星の半分を占めてあまりにも簡単に行うことです。

オンラインプレビュー住所：

同時に、または比較的小さい背景画像であってもよく、本論文の方法が利益のためにある、純粋なCSSドリブン、各種スイッチは手の込んだなかった、我々はまた、ちょうどここにいくつかのアイデアを提供するために、類推によって学ぶことができ、この需要に似て、JSの多くの保存、JSを必要としません直接画像を使用せずに、写真の使用に比べて多くのリソースを節約するために、少しパフォーマンスを向上させます。しかし、コストを学び、理解することはやや高いですが、それは子供の靴の「トス」のように、この記事のために、したがって、すべての相手には適用されない場合があります。

おすすめ

転載: www.cnblogs.com/homehtml/p/12521950.html
おすすめ
ランキング
Python 描画 3D 動的ヒストグラム コード チュートリアル
[vue3 共通エラー 5] Uncaught (in Promise) TypeError: xxx は関数ではありません
シンプルアップロードExcelファイルやデータベースにデータを追加
springboot における import アノテーションの役割
numpy 多维矩阵的维度交换
WMS システム - ウェーブ管理
Redis（7）マスター/スレーブレプリケーション
三北斗七星星座コアグローバルシステムの導入は完了です！グローバルネットワークを推進するために、
sql server语法——排序查询
続行することはできません立ち往生
アーカイブ
もっと
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)

コードワールド

© 2018 codetd.com