原理如下:
4 f7 C1 \9 j9 U& _: r) a- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
- W& u+ P% x8 U- R X6 ?. P
8 ]9 R0 |6 H" b6 q5 d1 k基本布局:8 c$ m1 |2 b) h. K" C
这是我事先生成好的iconfont:: X3 c/ p' Z5 E! ?! Z
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
; n5 }* l! j# J; X' V<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 i6 F- Z% F7 C- i. i
/* 去掉默认样式 */
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;
} 效果如下:
: S; o, w( Y. B& [$ d r' ]$ e
: T1 A3 O& A$ i$ O, i9 J- Y: U' f. r
实现选中单个星星
5 c6 o' v( z9 J8 J$ V) d2 V/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:0 I+ }0 J5 @3 ~
( @- l2 v& y* K3 D实现连同兄弟元素一起高亮
! Q& R' `# ~/ v. p/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:1 a/ V! C' o ]* ~
; M) P) Q% m1 M; ?- A6 k
把input反向排列7 t+ ?/ ^+ H9 ?/ c4 z& n
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:( ]- B, p2 a) C5 M
9 R( o) Q0 y6 Z6 g$ T; Z" a- `
鼠标移入预览选中效果
: Q" e4 g3 o. Sinput[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);
} 效果如下:
$ B8 ]' ~& c1 l6 X) k) @. _
, ]0 V$ T2 f) ^9 {, J7 E
加入放大动画
. M+ r6 Z) g: u; b% j/ \input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:7 j( h' H8 i! e6 b1 @
' l& h# p \0 `总结:
0 d& t% ]$ q M" \ 核心代码其实就是这两段,其他都是可选的。
9 \8 C( B3 _6 M4 n/ R 元素反向排列:
; p( A7 R$ \, @, {- f- o! }! M: i) P9 A! {
display: flex;
flex-flow: row-reverse; 兄弟元素操作:
9 t/ o( |4 J! sinput:checked ~ input 点击查看演示>>
0 i# T. N6 q) @ e Y1 \点击下载源码>> |