原理如下:
& M6 w, u0 G8 D2 ?. e- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
, @' w) _$ v' @: z, t 1 V' }$ J7 W# R6 Q
基本布局:$ h/ O" R5 w) B
这是我事先生成好的iconfont:% R4 P* T+ `: Z# t8 ]
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:. @9 d# C f \# Y7 C
<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> 先把默认的星星显示出来:
" j) k- T' o& C* 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;
} 效果如下:
O2 b7 G9 ?+ D7 U! x
' n& D: R& F2 f* R: Q6 A
实现选中单个星星9 E/ [7 I& x7 j) J5 q, A
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:6 R4 G- G! W! w K( ]/ O' N: j8 X
( Q9 R! g0 y: P, v k4 E$ m实现连同兄弟元素一起高亮
5 A8 U, o) `; L2 X. ^$ c' p. I/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
. {( [: J/ m4 p5 u+ }2 [
4 l- n/ X. S/ e; w" h" D; ]0 ]) \
把input反向排列) z" @8 m2 n5 O* a
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
+ W$ H- `; V' q$ X- Z/ X
0 r% j8 v" j8 v% Y- X D1 H鼠标移入预览选中效果; v5 A: h3 M. s4 Y
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);
} 效果如下:
' t4 d1 T& d( ]6 M4 E
/ j& Z8 `' K n3 R1 h3 q" L1 F( T0 E加入放大动画5 J! W! v8 r4 A4 Y7 I# s
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:7 Z' y$ j2 o' }/ D
) u+ m% Q4 b/ ?5 p) \总结:4 V7 r/ h/ l% P" W5 f) a0 ~
核心代码其实就是这两段,其他都是可选的。, [) O8 C/ L+ D, b0 f( \
元素反向排列:
+ g* X; ^/ g# x
1 J5 i& c& _# S! ldisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:& V7 B- |0 v' E$ z7 J N% j% o
input:checked ~ input 点击查看演示>> f1 C; A4 u0 d" l: y$ z' C! F: d$ V* ]) y
点击下载源码>> |