僅3行核心CSS代碼的rate評分組件，秀到你懷疑人生

用css實現(xiàn)一個rate評分 ? 核心代碼也就三行，效果如下：

目錄

• 原理

• 代碼

• 
  
• 基本布局
• 先把默認的星星顯示出來
• 實現(xiàn)選中單個星星
• 實現(xiàn)連同兄弟元素一起高亮
• 然后把input反向排列
• 鼠標移入預覽選中效果
• 加入放大動畫

• 總結

• 獲取代碼

原理

梳理如下：

1. 去找個好看的iconfont，[Iconfont-阿里巴巴矢量圖標庫]、；
2. 借用5個radio單選框，把默認樣式都去掉，顯示默認的星星；
3. 用checked偽類監(jiān)聽用戶選中?，由默認的星星變成高亮的星星；
4. 然后配合~兄弟操作符把當前選中的所有兄弟元素都一起高亮；
5. 把5個radio單選框反向排列 ?；

代碼

基本布局

這是我事先生成好的iconfont

<link?rel="stylesheet"?href="http://at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">

一個很簡潔的布局：

<div?class="rate-content">
?<input?type="radio"?name="rate">
?<input?type="radio"?name="rate">
?<input?type="radio"?name="rate">
?<input?type="radio"?name="rate">
?<input?type="radio"?name="rate">
div>

先把默認的星星顯示出來

/*?去掉默認樣式?*/
input?{
??-webkit-appearance:?none;
??border:?none;
??outline:?none;
??cursor:?pointer;
}

:root?{
??/*高亮顏色*/
??--main:?#ffa822;
??/*默認顏色*/
??--basic:?#999;
}

.rate-contentinput[name="rate"]?{
??font-family:?"iconfont";
??/*之前引入的iconfont字體*/
??font-size:?30px;
??padding-right:?10px;
}

.rate-contentinput[name="rate"]::after?{
??content:?"\e645";
??color:?var(--basic);
??/*加點顏色過渡效果*/
??transition:?color?.4s?ease;
}

效果如下：

實現(xiàn)選中單個星星

/*?實現(xiàn)選中單個星星?*/
/*?高亮的星星?*/
input[name="rate"]:checked::after?{
??content:?"\e73c";
??color:?var(--main);
}

效果如下：

實現(xiàn)連同兄弟元素一起高亮

/*?實現(xiàn)選中單個星星?*/
/*?高亮的星星?*/
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after?{
??/*實現(xiàn)連同兄弟元素一起高亮*/
??content:?"\e73c";
??color:?var(--main);
}

效果如下：

然后把input反向排列

.rate-content?{
??display:?flex;
??flex-flow:?row-reverse;
}

效果如下：

鼠標移入預覽選中效果

input[name="rate"]:checked,
input[name="rate"]:hover::after?{
??content:?"\e73c";
??color:?var(--main);
}

/*?兄弟元素一起高亮?*/
input[name="rate"]:hover~input[name="rate"]::after?{
??content:?"\e73c";
??color:?var(--main);
}

效果如下：

加入放大動畫

input[name="rate"]?{
??transition:?transform?.2s?ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover?{
??transform:?scale(1.2);
}

效果如下：

總結

核心代碼其實就是這兩段，其他都是可選的。

元素反向排列：

display:?flex;
flex-flow:?row-reverse;

兄弟元素操作：

input:checked?~?input

獲取代碼

?支持三連