原理如下:0 D2 K/ F: s- L3 N; y% x7 `; d9 k
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
: d7 x N0 x5 R ; @% i+ @( b' T9 }% y
基本布局:
$ T/ i. }0 I5 ?) H5 f+ M* x# R 这是我事先生成好的iconfont:
@* d q, q N' W<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
3 l$ m0 r0 p1 Z- p- h: _5 ^7 h8 s% q; y<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> 先把默认的星星显示出来:
. l; W1 a7 q3 ~4 k7 ]7 A/* 去掉默认样式 */
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;
} 效果如下:
7 f5 A$ C: v4 l; J7 D# N2 R
3 C8 o! O# w0 x$ Z6 b9 }: h9 \
实现选中单个星星4 J9 ^% S" ~' m l/ n
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
H# @/ _3 a8 {9 d3 e/ X$ N
1 C5 c _6 n4 I" j
实现连同兄弟元素一起高亮- {+ N9 d' i" y& Y# |% Y( {
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
; h! _4 u9 o4 ] `6 c: d$ f2 G3 K
3 w( ~2 G7 T% M" c. A
把input反向排列, N* k8 ?: I( O6 j, |. j; {0 F
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:4 F: Y2 n D8 Q, m. M1 P) h# C
& M+ R7 D5 }' L" S" u鼠标移入预览选中效果
5 p' _. O$ t/ D% R3 M4 Uinput[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 G% q. p& D. P5 ~, ]% s
4 S3 h- D1 A* `) l( a加入放大动画$ h7 @2 z! O- |4 Q/ _* p4 x, n
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
0 o& w% i6 q+ i& J' m
8 P2 B; B$ W9 m- b" [1 V" e% r9 m总结:
, }. @% f f3 `; { 核心代码其实就是这两段,其他都是可选的。3 c! x9 l; u1 l' d% }
元素反向排列:8 t( c5 f0 U, @6 }, {& w
1 P" y& ]6 |- e' I0 L/ H H
display: flex;
flex-flow: row-reverse; 兄弟元素操作:
7 N9 M9 h( Q7 {8 Y$ m; B: N, `input:checked ~ input 点击查看演示>>+ W, o" G& R3 L* F6 ?* l. q( t
点击下载源码>> |