原理如下:
8 S C0 C4 f5 T& x3 y% X# L! ^- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
( } Y8 b# K+ d5 t! s
6 `$ b; C: _# |# H. w/ x基本布局:+ n, }1 y1 b, {; V# v1 l5 V( o
这是我事先生成好的iconfont:7 y2 G. o6 W2 N W
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
) k& e0 e% K6 g+ ~) H) T, R7 x<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> 先把默认的星星显示出来:/ G3 |) F' q2 f% c0 U V/ M, n
/* 去掉默认样式 */
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;
} 效果如下:5 S/ p# L( k* m+ R& q2 H6 c q; ~
" |( [7 j) M* X$ \" w( O3 v5 T
实现选中单个星星
' I8 }) _0 k* @0 |0 I8 y0 ~: {" E5 Z/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
# E1 Y/ i' ], f) W
- K) [1 Q6 S! L1 r' S实现连同兄弟元素一起高亮
7 ?* u5 O2 ?1 U6 c3 E/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:( c5 N6 O/ b6 O% [
. S: k! E4 Y5 {. B7 }- M8 l
把input反向排列
: y- U/ Z: o9 j0 ?# F" m/ G.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:/ j6 _$ H$ u( ^/ L" g( i
$ Y1 T! x* s9 Z1 |, Q) g8 U: }
鼠标移入预览选中效果
- z/ Z" J# n4 x+ p% pinput[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);
} 效果如下:
1 f0 X# T, \* l8 i2 m
( Z7 [0 [1 Z- c0 {$ |加入放大动画
. |* U: C9 z, }; \9 |6 Xinput[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:2 K! S* i% @" c$ s8 ]: H
; _& x) P, T0 g, @( p% J" ?总结:
7 F4 p) b! X! R/ ~% B' }9 I 核心代码其实就是这两段,其他都是可选的。
0 p/ J" s/ J& |! P 元素反向排列:# y3 a& W5 T' C3 T C
4 h4 f4 T" G& A6 o+ B" j$ pdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:
( s/ n4 x1 k5 H' G; Uinput:checked ~ input 点击查看演示>>
& e8 |! D' E: B点击下载源码>> |