原理如下:
# d( E) i4 o2 P' i- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;/ m7 j' ~1 ~8 j8 k+ H
, Q1 x4 H, t `) N5 g# ~
基本布局:
! w* n" J$ W& y* e 这是我事先生成好的iconfont:
& |3 N, Z& z9 ?8 ^3 ~! W<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:' J5 {4 Y8 u8 s7 \1 @" 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> 先把默认的星星显示出来:0 h0 p- p/ k! n2 w! w9 q7 A. Z, G
/* 去掉默认样式 */
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;
} 效果如下:
p1 b1 [" ^- n; X# j y7 E
& i3 R0 S1 p& p0 U( n1 @& F
实现选中单个星星
2 f, _) M6 x7 P7 K5 B+ U' J/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
! {! V* O! o' |7 P3 ^- t
. B8 A9 b1 B# |) ?7 K+ y实现连同兄弟元素一起高亮
) I" s I+ [9 x/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:& L+ N$ ~: ^3 M5 G% k+ V3 I
2 \: `# ], z; Y3 p0 @把input反向排列$ o, r: f! V$ \% f: j1 Y
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
5 Y/ k7 l' V; K' Z N
) \2 _8 d4 O, z( U5 D鼠标移入预览选中效果
& \. l4 n" g) ]1 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);
} 效果如下:
. g. s* c9 \" _0 g: @* X
8 J# ?0 a6 ]3 N9 j1 n2 [加入放大动画; K6 W- H' G7 ~2 ?' S' a
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
$ S1 Q' x' n2 u) }* T9 p
% w: }" ~& b! Y _; O' Y9 M7 c
总结:
7 f7 t' d' s& G7 \7 o4 U 核心代码其实就是这两段,其他都是可选的。
- W4 k% f$ m4 H! ~1 y: q 元素反向排列:
$ D' l4 B2 K1 v* k. X
0 w. `4 |' Z3 S' F0 I4 qdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:$ g5 s% B) p. J, q/ i# \8 G
input:checked ~ input 点击查看演示>>
3 t) u- {" T) A5 j1 S6 t A3 @$ `点击下载源码>> |