原理如下:
8 p- @( o$ _. `+ e6 N. I8 y- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;" ~$ I/ E9 u$ @
: {' h& I# h, V1 {0 {( v7 Q
基本布局:
( e* @! [4 K* E# F6 a0 } 这是我事先生成好的iconfont:7 K# |- n/ n0 C" S* U+ Z
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:6 T8 G; p4 K$ q6 G, [' a' s3 s/ 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> 先把默认的星星显示出来:
2 p7 @ j) E$ l5 R6 N; N/* 去掉默认样式 */
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;
} 效果如下:
, a' Z! V/ C: o0 Y
( u# y4 C f$ O( P2 [1 h! a2 U实现选中单个星星0 G/ O1 c- y4 u4 f3 i6 K+ {* k
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
0 C7 D+ {1 ^, C! d& J# i, [ _# w- [8 A
( {3 m6 f5 ~/ q" Y实现连同兄弟元素一起高亮
" d Y5 K0 w% l2 n/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
( r2 ]' G1 p! e* i; b% K/ i A2 r' T
% M; A- ?8 e9 s把input反向排列
. i5 `, @& b' N* @% E3 o: E$ d7 y.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
0 M; b" s8 `) s) G4 g2 H
' A( t. c6 h% B' v& \2 i7 H
鼠标移入预览选中效果3 o0 j) R0 p. J3 T+ T" f
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);
} 效果如下:3 ^3 r8 ^8 Q3 `: u
q! O1 d# n! ^* }6 o
加入放大动画
r7 D. T) {/ \: o; O7 f0 Ginput[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:) k) q# l2 }9 X3 m+ [6 w/ h5 _
: P- `( h, ]2 \3 D& e
总结:
4 D5 Z1 X3 b! ^' Y; Y8 X 核心代码其实就是这两段,其他都是可选的。( S% q; `6 P" c8 v/ K' O7 y; X
元素反向排列:
1 V$ ^+ j% b2 S+ o. J% u n7 F2 t' O: E+ F* d
display: flex;
flex-flow: row-reverse; 兄弟元素操作:7 R9 W% b9 R; s% e& N7 d
input:checked ~ input 点击查看演示>>& K9 c% |/ r- y) R% Q
点击下载源码>> |