原理如下:& K6 k1 W! G, F9 M e. m! a
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;3 M: G: V5 D% o/ n' w
+ d/ q/ v- o5 A/ A, i基本布局:. v6 R0 {# Z' R( _( ^
这是我事先生成好的iconfont:
$ \9 {* K. c1 u+ t* B) q0 Y1 D<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:5 J3 M$ M9 J0 F/ q
<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> 先把默认的星星显示出来:
6 W$ c1 G6 X* r& [8 I% ~/* 去掉默认样式 */
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;
} 效果如下:2 Z3 x5 S( |5 x7 h, ^6 a2 \
) l& Y9 }/ d( p' |/ Z实现选中单个星星+ \6 Z* r" U6 R/ ~# S7 ?4 U
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:3 d3 S) t" l! y3 _2 b
) r/ l7 I% h0 P( \
实现连同兄弟元素一起高亮8 l4 z' o" u/ e1 @( c
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
+ Z0 ~. D! R( Y3 S
' G1 X0 B/ h, m6 s6 B: M+ i把input反向排列
- P1 @7 e" O' U% ?.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:- I" G" M5 X8 X
* M& L% f- J! [- V* v
鼠标移入预览选中效果1 N# `4 Q- J) `' f# H+ x
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);
} 效果如下:
1 M+ s" `/ S) [# ^
$ K! Z, H1 @6 d7 l加入放大动画
# c, m) a; |4 Q8 N- Iinput[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:9 m: d- n4 \! w, v' f
( p4 q/ D# ^4 }6 q
总结:
8 V( C* m+ {, d) j* ^) K 核心代码其实就是这两段,其他都是可选的。8 ^ V; Z$ d4 G- F) t1 Y$ W4 N) h! E
元素反向排列:
5 K7 [- q; ^( {1 R5 U2 a9 T1 c8 ]3 T& x& A8 Y
display: flex;
flex-flow: row-reverse; 兄弟元素操作:
. D! k9 A" L! Y( G# K3 rinput:checked ~ input 点击查看演示>>' }5 ~) m& B# g* {) ?1 O
点击下载源码>> |