原理如下:
; _2 Q% d- B" E2 W. ]: u' m- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;! Z9 B( r/ m+ Q. V: w9 \4 T
5 k x0 I3 R/ Z* u
基本布局:& A" x/ @! D) T( H; \; [& Y% J
这是我事先生成好的iconfont:0 k/ K' n8 a% u s
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
5 ~* D2 v }* O. m K2 N* U9 G<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> 先把默认的星星显示出来:
{9 o9 Q$ \! R' t2 d3 l" C/* 去掉默认样式 */
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;
} 效果如下:
& `3 j3 Q- t: G
+ r& c" M2 v" X3 c4 ^
实现选中单个星星
1 E$ k/ N9 b! \& s/ c( C# v/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
- x# B g* i9 r: y: ?; T# ^/ W C
' L$ i6 a5 H5 Z% f& X
实现连同兄弟元素一起高亮
' D& L1 K6 e' H/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
5 U2 t' L. l6 _( P9 E* X
1 w: x7 q' l7 R B把input反向排列8 f. Q; p6 n0 X$ S, G5 V
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
6 |) g1 w& `/ |5 [
. h" i( h9 b! l. V/ K+ G3 q( z
鼠标移入预览选中效果
6 m5 X, h9 g$ Z/ q) p# e* Oinput[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);
} 效果如下:+ t3 X: e0 ~7 T% e/ |0 U8 V' q
8 w/ h. R, H5 A加入放大动画) Y7 Z/ L( f; ^4 J; {' G6 K
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:2 {; |; X) {: z, J+ M
. x; X: E+ x7 m, [% d7 x0 g总结:7 x; \8 @1 ~$ u! m l' g7 S
核心代码其实就是这两段,其他都是可选的。
4 ]+ O! s) E) m, D6 G 元素反向排列:) B$ X3 K9 R9 [" U4 U/ l% P. |+ M
' Q3 J7 M4 w) `6 Q' t
display: flex;
flex-flow: row-reverse; 兄弟元素操作:1 c' A5 b0 f3 j* Q
input:checked ~ input 点击查看演示>>7 O$ h- }" M+ D8 i+ T8 H
点击下载源码>> |