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