原理如下:
: X( |3 g! ^0 H2 C- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;6 F+ w7 r- Q, O5 J0 {# [3 n
! E: W. C/ V$ E; O, M2 h; q基本布局:. _+ }) U6 ~& x8 [0 [& R
这是我事先生成好的iconfont:
6 g) Y, W% R/ e7 \0 S# G<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局: g6 C: c7 b G6 V- z
<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> 先把默认的星星显示出来:- G& ~7 X; O( y2 S
/* 去掉默认样式 */
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;
} 效果如下:
0 U2 _4 m8 d3 {- n
( _* p/ I) x% R/ h& V c; h! j实现选中单个星星2 @1 ^* q# G" }3 k' s/ _* D3 d0 `
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
) G9 \$ C& {2 e) p4 X8 q: k# Z( z
0 y( P+ O; o. m- H+ z/ y& F
实现连同兄弟元素一起高亮& d6 p) G1 t% k9 W) L/ i
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
8 |3 U6 [, q$ Q& I
2 l# {: ~+ r; F# y把input反向排列
+ [3 R' x0 R- d1 C9 ].rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:: N+ E8 {. v- v4 h/ k3 {
' r: A' l- A- N6 I# M5 x
鼠标移入预览选中效果! K) W7 I Y; o/ X& `, M
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);
} 效果如下:
2 |5 h) I4 D. O- |
9 f' B' E1 v" [( v& e加入放大动画; e6 f7 y; W2 O
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
+ |8 F9 s: M# K; a8 M& x p. `
5 O4 P& Q% _: [2 t
总结: {( H0 b' S! d- J$ B2 v
核心代码其实就是这两段,其他都是可选的。6 c3 _# `1 L0 Q+ ]" d
元素反向排列:5 _9 G [6 w- z+ A% T, k
: J9 B: G- c1 P2 w8 a$ Pdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:
# T7 ~6 M, F6 g r8 x" u3 zinput:checked ~ input 点击查看演示>>' d0 U, n- n2 A1 t6 x2 G
点击下载源码>> |