原理如下: " n9 s* [0 P! ], H J
去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库; 借用5个radio单选框,把默认样式都去掉,显示默认的星星; 用checked伪类监听用户选中,由默认的星星变成高亮的星星; 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮; 把5个radio单选框反向排列;
% B8 \# g; p% p9 Z9 _( O [ R3 O' P% q' [7 D1 [- L7 A: w
基本布局: ! @' q( b3 U, s0 F9 I: M) Z
这是我事先生成好的iconfont:0 x m9 V8 U1 C: i9 |5 a
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:, V& `. O1 F1 G8 {
<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> 先把默认的星星显示出来:3 G5 H2 Y: X; I* R0 Z2 T
/* 去掉默认样式 */
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;
} 效果如下: L7 N0 D1 Y# y
x. L3 H+ \1 Q+ c P% [ 实现选中单个星星
6 _ @, r2 K0 `0 q* H, B; G) P /* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:& ? M% L5 W( f2 d: f' j
& w& ~9 L. h1 z* ], ]
实现连同兄弟元素一起高亮
/ A$ h' E1 u k5 h/ L& N) x1 @ /* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
) }3 H F, S5 g& q9 c
- Z" h6 M' T* U
把input反向排列
, P: B# l/ a$ C0 b. t .rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:# J% e+ ?/ k/ G0 Z; s4 |
& U. d- f' \" _ 鼠标移入预览选中效果
; l4 S6 i( P/ B& @$ b4 _ 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);
} 效果如下:/ A3 q( z* ^7 Y1 i
) X7 Z# S/ v Z8 B. u* A" L 加入放大动画
" v7 K# p, l9 p1 p+ @: \8 i+ f, u( @ input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:8 s; F9 |3 N. x
& b, n V; Q) a: Y
总结:
2 o4 \" ]3 A) H9 a6 F8 E3 Z$ l/ f 核心代码其实就是这两段,其他都是可选的。, E5 y0 [- `/ v* D2 G
元素反向排列:4 M. \! J. I3 h; h6 V. J
; c' O4 h" e/ V) P
display: flex;
flex-flow: row-reverse; 兄弟元素操作:! V* g+ e5 K/ a4 S
input:checked ~ input点击查看演示>>
/ Q1 @/ V8 L) v" X& Q8 } 点击下载源码>>