原理如下:
) E0 C& \4 o+ E4 S$ a7 }- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
3 @/ P/ e0 }" z7 e) j
) p( L4 D* R7 S! @% F g基本布局:
i+ E( e' C' S% O, ~ 这是我事先生成好的iconfont:
$ n" `6 }3 Q9 ^+ S) V<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
" j( O& Q4 j, h3 O$ z5 g/ @" K<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> 先把默认的星星显示出来:
. ]5 z1 h" `# M5 m+ o9 ~! c/* 去掉默认样式 */
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;
} 效果如下:
1 X' _( c9 B" e" A6 a' }. H* e- m1 n
& P: Q$ E0 B8 g
实现选中单个星星
2 G3 V( |3 [# n/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
5 d; ~: H: O$ S% F! M
, q1 ]/ k1 d Q5 {- R
实现连同兄弟元素一起高亮6 [/ y' h. G. I. Z
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
$ F, A. Y3 [: B( Y0 _9 L: U
% }7 ?) ?* j5 q+ j" e# K9 C" ]- T把input反向排列
1 Z0 m& a6 B3 u, e% A) `.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:9 E- q8 F3 v5 _" _# v5 D+ U
; |2 R1 K% Z; O5 {鼠标移入预览选中效果
0 e* G% H" I4 W& a4 b; einput[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);
} 效果如下:
8 Y5 E1 Q" E. H4 l+ H
+ l( K2 k- C5 V( x* U
加入放大动画
9 j/ r% o# d5 N# s% K) Y pinput[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
% K. c9 l. a4 L' K# i
( J; u0 q( O; ] }' p
总结:
( q4 q5 `' x9 J( D5 { 核心代码其实就是这两段,其他都是可选的。5 O) c% N5 j8 i: ~" \8 J# c i+ p
元素反向排列:
# j( M1 e/ R# ^% O/ V) b
: A% \3 L4 A- i- n/ W% Jdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:
1 j& Z6 M& k- Q. A! i9 H' R8 uinput:checked ~ input 点击查看演示>>5 e" c( K/ `4 {4 m$ X
点击下载源码>> |