原理如下:
; L3 Q) c% H+ b/ X/ w- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
7 ^" U4 m# Z K. T: ]9 l# D, ~ % r9 i; _* Z' U9 |3 g9 T( v
基本布局:. S& Z+ Q" v+ G
这是我事先生成好的iconfont:
& w" ?9 X( ?6 Q<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
6 }9 ?- s4 }; _( c$ J: j, n j* t<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> 先把默认的星星显示出来:9 Y' F4 a, @ B! U- i9 V1 u- t
/* 去掉默认样式 */
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;
} 效果如下:
* E6 Z% i" q. J v8 H
/ ~+ o+ \- g/ u: g0 U N! _ J0 `
实现选中单个星星3 @; G& t; K2 n' s3 K
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:$ i, M R" t9 @4 w6 Y5 T+ \& Z
5 P! ^$ i1 i* B% K* { F实现连同兄弟元素一起高亮
- c$ d' Y! g2 J6 ], i- L/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
; h( S3 I# Q( K) B+ X3 R
7 Y- j6 m. X& k/ I& n/ l& y
把input反向排列
, k" C7 _) H3 p% o& l* W. J.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:3 m& w: j; q1 [8 H* n4 d
, t5 X+ f) G2 p( T鼠标移入预览选中效果
1 g7 i m, o9 ^3 C; Qinput[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);
} 效果如下:* ^% A Z0 W) O7 ^( Q6 G. ^
/ s. s( ?: P" B* E" Z. p( R
加入放大动画8 w- p. j' R$ |9 p8 l) \, E$ {
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:) ?/ k _. p6 n: F0 x
) z1 E% h* V0 c) G1 d9 d7 {& O
总结:
% y1 W( h2 P- I1 ~+ j 核心代码其实就是这两段,其他都是可选的。
5 B4 H) g7 r. P* M$ I 元素反向排列:
! }4 a Q, N; L/ P: K
' v" g' n* U/ Mdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:
! n& P! Y8 K: Kinput:checked ~ input 点击查看演示>>
$ ?) l! v; q0 s点击下载源码>> |