原理如下:
0 |3 n9 ]+ Y: w! t- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
! K$ k; h5 p0 u) |. C% f$ ^
( o6 N9 \) ?* f基本布局:
8 z `$ l8 i, x 这是我事先生成好的iconfont:. E$ o0 t1 C) _1 `
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
1 F0 g6 s. o$ f* l; P* V0 \<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> 先把默认的星星显示出来:" x9 U; ] b/ u8 C: X# v
/* 去掉默认样式 */
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;
} 效果如下:
! c4 | X1 w* L) _1 d
T+ Q% ~/ m& a4 v+ z& |
实现选中单个星星2 D5 |" M! W1 G3 i# ]' `
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下: }) F5 _/ Y7 K6 s8 R; Q
0 q$ f( o8 D* E+ k实现连同兄弟元素一起高亮6 N: @/ t2 u- ~/ s
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:( h- E/ |. h$ K( N4 O; c
" j! \4 z& c0 @6 f: ?
把input反向排列 m; x8 q" P# B8 l5 q) e
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
. F# k, V8 q7 Z4 X# X7 k5 w
# c0 ^' S5 L. ?鼠标移入预览选中效果
: W/ A7 ~7 u" S8 s, P0 G: e/ o' Jinput[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);
} 效果如下:
2 T: g- z/ ^& k$ q- n
2 C$ U4 M) M. t: j) p" P8 _加入放大动画' u1 B. P* l$ I+ u; T
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
4 c: f) R, e1 x
1 l% r: B1 M5 D9 {# {总结:
( [8 S _3 o3 q# z2 u" ~ 核心代码其实就是这两段,其他都是可选的。1 K3 N7 B& H, B0 R
元素反向排列:% h4 V8 u/ M- |
$ P2 ?, S: S$ cdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:6 w ^6 |9 g6 C# W
input:checked ~ input 点击查看演示>>
; Z0 d- Y( \( T, ?$ J) b点击下载源码>> |