原理如下:
! p) Z: D; n! Y, D3 _. o- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;: k/ T% M! m% `7 u% Z" Z
4 k3 a5 V5 }9 s) l基本布局:
" l) {+ p2 {9 P) m( z( X/ ` 这是我事先生成好的iconfont:7 y- k8 W1 W( y
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:# C( w% C. V' \$ g# b A2 T
<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> 先把默认的星星显示出来:8 n; Q2 B( I5 H. t& x/ l
/* 去掉默认样式 */
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;
} 效果如下:* `' j H1 a0 m, _& Q6 F% J
* T2 l9 ~1 O# t& l5 j实现选中单个星星( P+ ?- x+ \2 k
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:& T% r+ D* P" ~% v: m4 @/ b6 C
% j2 \' }. m$ [) Z0 ~
实现连同兄弟元素一起高亮- X3 `! B9 T8 n5 M. c: z
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
8 n( u2 j6 K1 h( w; F+ w2 U: p
% G1 A' V& n2 U; Z! G& P% T把input反向排列* M6 i- F% o! m- n. B
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:, E3 }6 c& f. {# c
" O; D' K0 z6 Y' L
鼠标移入预览选中效果
, S+ H/ V$ K, o5 x5 f. D3 W. Y5 binput[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);
} 效果如下:
5 N% L9 a+ D" y4 D/ j
% ~0 |) e) `+ L+ C( r
加入放大动画. x: G ^/ G0 i( @0 n+ N
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
7 v$ i0 {' L! y, B) j- _) W0 z
7 H1 G3 l% A, m9 i' c总结:
3 f! u( B. ]$ w8 h" A% P6 H 核心代码其实就是这两段,其他都是可选的。
$ j" P. Q) U8 N# q! ]6 b 元素反向排列:* r6 V0 W3 s1 S! x0 L
3 |; c, e0 L* f+ Zdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:6 G' R0 ~& U/ ^ K- F
input:checked ~ input 点击查看演示>>8 \6 j: }% R y" j O: F6 |: P
点击下载源码>> |