最近做的一個(gè)項(xiàng)目涉及到評(píng)分和展示分?jǐn)?shù)的模塊筋遭，UI設(shè)計(jì)師也給了幾個(gè)切好的圖片拱烁，實(shí)現(xiàn)五角星評(píng)分方式很多暇番，本質(zhì)愛折騰的精神和對(duì)性能追求以及便于維護(hù)的考慮，搜集和嘗試了很多方式档悠，最終采用了純css驅(qū)動(dòng)的實(shí)現(xiàn)方式完成評(píng)分和展示分?jǐn)?shù)的功能捆探，沒有js,也就意味著沒判斷邏輯，代碼出錯(cuò)的幾率更少站粟，也更便于維護(hù)黍图，在此，把這個(gè)功能的實(shí)現(xiàn)的過程記錄和分享一下奴烙，一起學(xué)習(xí)交流助被。
原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) 剖张，喜歡的可以關(guān)注最新動(dòng)態(tài)，大家一起多交流學(xué)習(xí)揩环，共同進(jìn)步搔弄。
五角星的實(shí)現(xiàn)
1.圖片或者字體圖標(biāo)
不極致追求性能的話,直接利用設(shè)計(jì)師給的png或者jpg啥的,或者直接轉(zhuǎn)成base64.
2:利用Fontawesome 圖標(biāo)庫，其實(shí)只是一種矢量字體丰滑。
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描繪拼湊一個(gè)五角星顾犹。
基本原理：利用transparent的透明不可見和transform轉(zhuǎn)換拼接一個(gè)正五角星。
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);
}
不建議使用這種褒墨，因?yàn)檫x擇之后改變顏色狀態(tài)比較麻煩炫刷，改起來很不方便，不如前面幾種方便好維護(hù)郁妈。
4.直接使用五角星符號(hào)
★??
簡單粗暴浑玛，容易控制，品相協(xié)調(diào)噩咪，下面實(shí)現(xiàn)方式以★為準(zhǔn)顾彰。
關(guān)于CSS的一些選擇器
不用js來控制評(píng)分，當(dāng)然不能錯(cuò)過強(qiáng)大的css選擇器胃碾，這里就先介紹一下關(guān)于實(shí)現(xiàn)這個(gè)功能要用到的一些css選擇器涨享。
在介紹css強(qiáng)大的選擇器之前，先普及一下“CSS radio/checkbox單復(fù)選框元素顯隱技術(shù)”仆百，又稱“checkbox hack技術(shù)”厕隧。
1.checkbox hack技術(shù)
我們使用CSS一些特殊的選擇器，然后配合單選框以及復(fù)選框自帶的一些特性儒旬，可以實(shí)現(xiàn)元素的顯示隱藏效果栏账。然后通過一
些簡單的擴(kuò)展帖族，我們可以不使用任何JavaScript代碼實(shí)現(xiàn)類似：自定義的單復(fù)選框栈源，“更多”展開與收起效果，選項(xiàng)卡切換
效果竖般，或是多級(jí)下拉列表效果等等甚垦。
相信很多前端開發(fā)人員都會(huì)遇到boss讓修改checkbox和radio樣式，畢竟自帶的樣式太丑了涣雕。后來我們發(fā)現(xiàn)修改自帶樣式
并不是那么容易艰亮，最后直接使出殺手锏——點(diǎn)擊之后替換圖片。
今天教大家一種方法挣郭，不用替換圖片迄埃，隨意修改樣式。還是先看效果圖：
先講一下原理：兩個(gè)關(guān)鍵東東兑障，一是偽類選擇器:checked侄非，表示對(duì)應(yīng)控件元素（單選框或是復(fù)選框）選中時(shí)的樣式蕉汪；二就是加號(hào)+ 相鄰兄弟選擇器，這個(gè)符號(hào)表示選擇后面的兄弟節(jié)點(diǎn)逞怨。于是者疤，兩者配合，就可以輕松自如控制后面元素的顯示或者隱藏叠赦，或是其他樣式了驹马。 而如何讓單復(fù)選框選中和不選中了，那就是label標(biāo)簽了哈除秀，for屬性錨定對(duì)應(yīng)的單選框或是復(fù)選框糯累，然后點(diǎn)擊這里的label標(biāo)簽元素的時(shí)候，對(duì)應(yīng)的單復(fù)選框就會(huì)選中或是取消選中鳞仙。然后寇蚊，就有上面的效果啦！
這里只給一個(gè)radio單選框的代碼,僅供參考:
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;
}
}
美化radio單選框在線預(yù)覽地址：點(diǎn)擊我呀
美化checkbox復(fù)選框在線預(yù)覽地址：點(diǎn)擊我呀
更多關(guān)于這方面的介紹和例子可以參看張鑫旭大神的這篇文章：CSS radio/checkbox單復(fù)選框元素顯隱技術(shù)
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: 選擇后面的兄弟節(jié)點(diǎn)們
.test2~p{
background-color:green;
}
E::after,E::before: 偽元素選擇器 在匹配E的元素后面(前面)插入內(nèi)容
.test2::before{
background-color:green;
content:"前"
}
.test2::after{
background-color:green;
content:"后"
}
:not(E) 選擇非 <E> 元素的每個(gè)元素簿废。
.wrapper>:not(.test2){
background-color:green;
}
:checked input:checked 選擇每個(gè)被選中的input元素薄翅。
HTML:
<input type="radio" name="" id="" />
<span>3333</span>
CSS:
input:checked+span{
border:10px solid red;
}
這里只提一下本文要用到的CSS選擇器，更多關(guān)于CSS3強(qiáng)大的選擇器請(qǐng)移步這里：全面整理 CSS3 選擇器的用法
實(shí)現(xiàn)評(píng)分模塊
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>
關(guān)于input標(biāo)簽的隱藏,我這里只要用hidden屬性實(shí)現(xiàn)隱藏,當(dāng)然還有很多實(shí)現(xiàn)方式,只要input不占據(jù)文檔的位置但是看不見就OK,我們需要隱藏單選框，且為可用性隱藏集晚。這里還有幾種方式僅供大家參考:
1. display: none;
.rating >input {
display: none;
}
2. css3的clip
.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;
}
展示評(píng)分模塊
用戶評(píng)完分之后，會(huì)看到展示的分?jǐn)?shù)诊县，假設(shè)五個(gè)星星缎浇，滿分10分。
展示評(píng)分就比較簡單熔号，放兩個(gè)一模一樣的html稽鞭，五角星顏色不同，灰色的放在下面引镊，評(píng)分的亮色放在上面朦蕴，然后按照百分比顯示分?jǐn)?shù)。
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;
}
當(dāng)接口返回的分?jǐn)?shù)是5分的時(shí)候弟头，剛好占據(jù)一半的星星吩抓，2星半，只要計(jì)算出百分比就行赴恨，只用管數(shù)據(jù)疹娶，用上vue.js數(shù)據(jù)驅(qū)動(dòng)的特點(diǎn)來動(dòng)態(tài)展示樣式這個(gè)簡直不要太容易。
本文方法好處在于伦连，純CSS驅(qū)動(dòng)雨饺，各種切換根本不需要JS挣饥，省了不少JS，對(duì)于類似這種需求大家也可以舉一反三沛膳，這里只提供一些思路扔枫，沒有細(xì)說；同時(shí)圖片背景比較小或者可以直接不使用圖片锹安，比起使用圖片節(jié)省不少資源短荐，和提高些許性能。但是叹哭，學(xué)習(xí)以及理解成本稍高忍宋，可能并不適用于所有同行，因此风罩，此文適合喜歡“折騰”的童鞋糠排。
