原理如下:* j) A% {, v- _( j
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;3 N* n* }$ S( i, i0 h/ ~
* X6 [2 I6 p) F2 W# z" Q
基本布局:
- k8 X- ?5 f& |4 S+ @) V- X 这是我事先生成好的iconfont:. K. t, g z: \% B+ B# ]
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
+ e9 n" _" \: z& g+ h( E<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> 先把默认的星星显示出来:3 u( S- p% c, ?4 L
/* 去掉默认样式 */
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;
} 效果如下:: Y2 u3 k1 s/ h2 w5 {! Y) a
6 W8 {$ {' z: S' G4 N" l
实现选中单个星星
5 S" }4 I- s$ T/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:. ^ d2 B& j" L; C! M* v3 w/ m! ?5 d
2 c6 o. q W v% X
实现连同兄弟元素一起高亮
2 c. E9 T2 \( T, x2 ~7 _/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:5 r- }- w& ]' O" ^9 {# q! K& F
' k- m& {+ e! y' \6 e) q4 q把input反向排列
; C, h; j p2 Q U, X.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:; d0 X* Y3 F4 P6 ]3 v' O
6 p: \4 L2 t# e* D- F
鼠标移入预览选中效果! i; J8 R+ g4 T; }
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);
} 效果如下:9 Q& |; D, Q$ r R8 K
% E! [8 b. g! }! a, T" x! W加入放大动画
0 O, q1 F% ]4 j B0 e$ v& n; Ainput[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:* y) X$ J4 r* y) r- p( F9 q& x% B
, E) f. s' J" y5 S* y, ^
总结:
: K' u! Z8 Y9 ]. m* w P 核心代码其实就是这两段,其他都是可选的。
$ |2 Q5 F/ L0 t( i( y/ ]5 i 元素反向排列:
0 \5 P# K/ }. e/ L" [' f% N( n. L! c: e( b1 F& U5 X
display: flex;
flex-flow: row-reverse; 兄弟元素操作:
& q- E! C( J# H" _% vinput:checked ~ input 点击查看演示>>
2 i4 F. F8 ^- I4 }点击下载源码>> |