原理如下:
! Q) m3 E: H9 E) {2 S/ p5 o- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;! D k! h, T* Z% J: P; v
2 f3 u3 {/ r1 x9 i9 P% P基本布局:3 C' \4 z/ u, j1 t. ?5 _$ b; n. j# m
这是我事先生成好的iconfont:, e0 e. P2 u1 E, T
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:& `3 Z2 c) H1 k0 ~6 s3 w
<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> 先把默认的星星显示出来:$ P% G* K" \* 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;
} 效果如下:0 R& F- ~+ S7 ^1 I9 l1 i
" L& t, u0 A, b( ~9 F0 h实现选中单个星星, x$ u7 N4 g9 |$ q
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
% J; p5 U7 I/ ^8 |. A4 l$ j) R
" s8 X& M7 W- L7 |) p/ i
实现连同兄弟元素一起高亮3 K; |. p& P! O
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:) m! p$ b( n, K
: ~: z4 k2 `- H$ q% N把input反向排列
) ]1 \5 u r" ^; l' J8 c, \( @' t.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
8 }$ N# {% M& u" `/ U
7 e% C( E- L8 `& z$ j' _鼠标移入预览选中效果5 f7 z- {# C4 N/ M# d% O2 C
input[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);
} 效果如下:0 {9 f, h g: q s, f8 W* U
4 O: d$ J f. _5 F7 a! X$ u
加入放大动画1 T9 Z+ a3 s" d8 h! }
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
4 J4 G. S5 v7 h% D5 F
8 B0 ~. H1 d" M0 T/ T
总结:- S& B9 M& P) ? S+ b
核心代码其实就是这两段,其他都是可选的。9 K6 U( a4 o/ E' k4 k; e) m$ w I
元素反向排列:: T' K: p$ \" }5 O+ X; v) h
3 a9 l+ ~3 I) }+ o, Mdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:. s3 x" \( `( K1 _* C1 k- p, z' U# w
input:checked ~ input 点击查看演示>>
0 y9 D7 f% P# J6 _. w/ c5 o* j点击下载源码>> |