原理如下:" [- Q: d+ l) h( P
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;. f( v& {; Y- @3 h, x7 {+ ]
2 h1 K! z3 r8 `. t. A ?基本布局:
0 q2 b% X/ `) @$ ^* @! M& ^6 S 这是我事先生成好的iconfont:3 t+ y. ^+ P: a; \, V9 ~" z0 i
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
+ n! Y' X7 l" S; G<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> 先把默认的星星显示出来:+ C: o* D* S! C' S* H& }; A; Q
/* 去掉默认样式 */
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;
} 效果如下:, \/ H9 P! i. w0 t2 B
/ [) L2 s* ` O" C1 [ d& d实现选中单个星星9 I3 ?% Q& h- a; ?1 M0 s6 ~, t/ }
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
8 m( L+ C7 b3 Q+ Z/ m
8 L" x( d6 n& o+ q: p: i2 O
实现连同兄弟元素一起高亮
+ X0 }- m n7 {. _/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
4 B E! g* Z' A& P
. L7 e: G2 I" c6 m
把input反向排列
, A( C" Q: n' }2 T.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
3 o3 ?. \4 D7 L! c# U. z
) \5 h! {1 i9 U* c
鼠标移入预览选中效果
0 O, Z2 ^& }+ ninput[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);
} 效果如下: P( [% ^, y8 K" [
1 P, v2 ^9 T& i+ e: j* z3 \0 l加入放大动画8 S: ?7 R. H9 E/ ]: s; ^. R K
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
/ o. X+ J0 r" N8 E
[0 u+ T$ U0 k! v. R9 L0 m4 U
总结:
' V. [% A+ u! ]7 R 核心代码其实就是这两段,其他都是可选的。+ j7 n# I: ^: M# m
元素反向排列:0 m' U9 L6 Z. z7 \; X% F
4 e. g3 o" f4 ^) e+ l2 s! \display: flex;
flex-flow: row-reverse; 兄弟元素操作:2 T4 V/ [1 N9 E v7 ]- n
input:checked ~ input 点击查看演示>>
/ t' o6 {5 j% [9 r9 k7 ^点击下载源码>> |