用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)注
哦 ??