原理如下:. g0 W0 ?1 m! T# B2 I. G- q) ~; `
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;* `+ ?3 ?7 `8 n0 A J# h
2 m1 A+ [& i( w5 A/ T. a
基本布局:
( p0 Y) g, b1 F( t4 s 这是我事先生成好的iconfont:; P0 m7 Y% `+ q1 ?
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:) C2 R) a+ \& L; ^
<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> 先把默认的星星显示出来:; i D2 y/ C: o, K' m- C# k
/* 去掉默认样式 */
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;
} 效果如下:
( n2 j' j+ r6 s" K
x8 f9 [: S9 u- E实现选中单个星星3 l7 a6 Q! p1 i z T4 E6 z
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:5 | `; c( X. @ q
8 W* G6 s/ D& S- `. ] I/ r1 D
实现连同兄弟元素一起高亮
( I2 o2 R' T" F. G/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
; n N$ I2 k# Q3 |7 q
. M. ]. V( E6 h- x, \
把input反向排列 w$ a6 q) z7 i% ?! M% d
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
: g3 ^1 j) L* d" s% l% y
9 X1 |! o0 q- l- I" `+ h2 v$ z鼠标移入预览选中效果
. g) x1 i: z3 j/ K6 Rinput[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);
} 效果如下:' n# A4 Y4 |0 o# K! E0 V
% _" N& C1 |& z# A
加入放大动画) D; W# g. B% ?
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
. j; F) n3 }* r3 t1 K. i- {2 K
! [; f* a0 Z* Q7 L9 N# ~ `, N
总结:6 S0 N: n8 D! [) ^8 I
核心代码其实就是这两段,其他都是可选的。7 h2 T+ l! x( b2 U, p6 t) u
元素反向排列:
4 j n9 q/ i @% d$ |) K( w O, Y% t) {
display: flex;
flex-flow: row-reverse; 兄弟元素操作:
/ d. V$ w5 f5 v. V; R( R+ finput:checked ~ input 点击查看演示>>7 H% X* [& R* O2 q/ h9 I
点击下载源码>> |