原理如下:
9 i9 \8 D, M- r- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;7 s5 g$ N- |0 R6 [; W9 B- U- k
' Y# |3 ^ R6 E基本布局:
6 W& R+ t9 U. s0 @( t6 a 这是我事先生成好的iconfont:
. g& c: N% n* C& `2 Q<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:/ J$ X" c; @. S
<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 y# n( y; R. u: 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;
} 效果如下:
3 j; M5 N( Q# ]. }9 o
$ R+ [2 c6 d! T% _
实现选中单个星星
5 S( c8 w! \. h/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:6 ?- J2 b5 X6 C9 s% z% Z
' j. M9 Q( `; U# |, L# Y实现连同兄弟元素一起高亮 r7 w7 {7 N8 D
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
# Z) m: e6 Q7 e$ V% c, ]
3 b4 S( r' H1 m+ c
把input反向排列
7 R7 a) Y4 E1 n( L3 ^3 v6 r.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:3 @+ E! u* Y) S5 j2 @/ n* j. M
+ b* h4 M, Y. {/ t) ]8 x" n鼠标移入预览选中效果
( o* Z6 v _1 \- V. w% o* {1 einput[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);
} 效果如下:4 ^8 q, ?1 g& J* b% D! Y% _1 u% F
3 m9 G, G, S7 V$ l! j+ l; z; Y加入放大动画( O, o/ ]( [" _" M- w
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:1 k7 r; ~9 Z2 K, w4 |
5 W% i; r" Y- O$ z5 O6 e7 D
总结:
5 a% y9 M: a6 a [1 w- l 核心代码其实就是这两段,其他都是可选的。
3 G( F- z5 I. Y; b0 M 元素反向排列:
9 ?0 d8 G0 X5 H1 O' a+ s0 F: F% d( H- `0 H& l% o# a( T- @
display: flex;
flex-flow: row-reverse; 兄弟元素操作: f+ P/ \; K2 p( X% V# K
input:checked ~ input 点击查看演示>>6 L. d( H4 k% I* B
点击下载源码>> |