原理如下:; s/ }: N" Z4 {, F( p
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
) e$ T8 ]' p+ K# [8 D 2 b' K/ k3 F! F$ k4 Y* G
基本布局:: ^% f2 }3 ~2 o. L. P6 o3 s; n, u2 d
这是我事先生成好的iconfont:
- k- [3 O0 B, f# k' o5 H& p2 E) W<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
" ~' j" n+ n7 r" u0 _: P% A<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> 先把默认的星星显示出来:
! H: n$ [5 v3 ~) M5 H* V# U/* 去掉默认样式 */
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;
} 效果如下:; P. `5 o2 z ?; ?8 G$ o
2 ?: B0 C7 k- |$ k r* I
实现选中单个星星4 m) X7 ~3 G1 C5 n" Q/ \& D4 ]
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
- j" I( Z$ G; c" w, H$ u
1 R+ {( ~' B( p/ k, R8 |) S实现连同兄弟元素一起高亮* c) }8 j' P, _6 D& O2 N
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
% A7 K8 Q. Z1 t. ]" _* r8 ] j
- K N4 o8 v I J# g* q
把input反向排列
2 Q7 H8 f" f, ]$ @- f.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:; Y" N- W3 o: s- J; m6 ~
' |& a$ h4 r$ P) S/ A6 u
鼠标移入预览选中效果! ` d [+ g1 o8 ~( a
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 x# E6 b6 y3 h5 q D4 z
$ w) z( X. Z0 p( C8 u& [加入放大动画, l$ l& n6 P; n$ L
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
3 V) `, _3 g. B6 O8 y
. g7 F; ~* Y8 B' D' t
总结:
& w( l4 ? |6 L6 Q) ?( l 核心代码其实就是这两段,其他都是可选的。
0 p4 m. x3 ]- Z; f 元素反向排列:
- i0 N: N2 N( }3 Q
6 o B& _: @. [; Q3 q: B" ?display: flex;
flex-flow: row-reverse; 兄弟元素操作:
, Z s! ^! P$ F1 J- [# zinput:checked ~ input 点击查看演示>>
. g' h( t8 X$ a* C% [/ W0 Z8 B点击下载源码>> |