用css實(shí)現(xiàn)一個(gè)rate評(píng)分 ? 核心代碼也就三行
效果圖
原理
梳理如下：
- 去找個(gè)好看的
iconfont，[Iconfont-阿里巴巴矢量圖標(biāo)庫(kù)]、； - 借用5個(gè)
radio單選框，把默認(rèn)樣式都去掉，顯示默認(rèn)的星星； - 用
checked偽類(lèi)監(jiān)聽(tīng)用戶(hù)選中?，由默認(rèn)的星星變成高亮的星星； - 然后配合
~兄弟操作符把當(dāng)前選中的所有兄弟元素都一起高亮??； - 把5個(gè)
radio單選框反向排列 ?；
代碼
這是我事先生成好的iconfont
<link rel="stylesheet" >
一個(gè)很簡(jiǎn)潔的布局：
<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>
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）
先把默認(rèn)的星星顯示出來(lái)：
// 去掉默認(rèn)樣式
input {
-webkit-appearance: none;
border: none;
outline: none;
cursor: pointer;
}
.rate-content {
$main: #ffa822; // 高亮顏色
$basic: #999; // 默認(rèn)顏色
// 單個(gè)星星
input[name="rate"] {
font-family: "iconfont"; // 之前引入的iconfont字體
font-size: 30px;
padding-right: 10px;
// 默認(rèn)顯示的星星
&::after {
content: "\e645";
color: $basic;
transition: color .4s ease; // 加點(diǎn)顏色過(guò)渡效果
}
}
}
效果如下：
實(shí)現(xiàn)選中單個(gè)星星：
input[name="rate"] {
// 高亮的星星
&:checked {
&::after {
content: "\e73c";
color: $main;
}
}
}
效果如下：
實(shí)現(xiàn)連同兄弟元素一起高亮：
input[name="rate"] {
// 高亮的星星
&:checked,
&:checked ~ input[name="rate"] {
...
}
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）
效果如下：
然后把input反向排列：
.rate-content {
display: flex;
flex-flow: row-reverse;
}
效果如下：
鼠標(biāo)移入預(yù)覽選中效果：
羅嗦版：
input[name="rate"] {
// 高亮的星星
&:checked,
&:checked ~ input[name="rate"],
&:hover,
&:hover ~ input[name="rate"] {
...
}
}
優(yōu)化版：
input[name="rate"] {
// 高亮的星星
&:checked,
&:hover {
&::after {
content: "\e73c";
color: $main;
}
// 兄弟元素一起高亮
& ~ input[name="rate"] {
&::after {
content: "\e73c";
color: $main;
}
}
}
}
效果如下：
加入放大動(dòng)畫(huà)
input[name="rate"] {
transition: transform .2s ease; // 加入過(guò)渡效果
// 高亮的星星
&:checked,
&:hover {
...
}
// 鼠標(biāo)移入使星星放大
&:hover {
transform: scale(1.2);
}
}
效果如下：
總結(jié)
核心代碼其實(shí)就是這兩段，其他都是可選的??
元素反向排列：
display: flex;
flex-flow: row-reverse;
兄弟元素操作：
input:checked ~ input
如果不用flex反向排列，還可以用rotateZ:
.rate-content {
display: flex;
// flex-flow: row-reverse;
transform: rotateZ(180deg);
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）
效果如下：
z軸旋轉(zhuǎn)180deg之后發(fā)現(xiàn)星星的頭跟尾巴反過(guò)來(lái)了，那么子元素也旋轉(zhuǎn)180deg即可：
.rate-content {
input[name="rate"] {
transform: rotateZ(180deg);
}
}
效果如下：
需要注意的細(xì)節(jié)
input[name="rate"] {
// padding-right: 10px;
margin-right: 10px;
}
如果用外邊距的話，那么會(huì)出現(xiàn)以下情形:
內(nèi)邊距的作用是保持元素連貫性以及擴(kuò)大點(diǎn)擊范圍??，最后附上本文代碼的codepen地址：css實(shí)現(xiàn)rate評(píng)分點(diǎn)擊預(yù)覽
最后
本文到此結(jié)束，希望以上內(nèi)容對(duì)你有些許幫助，如若喜歡請(qǐng)記得點(diǎn)個(gè)贊跟關(guān)注哦 ??
