原理如下:# X' y3 k2 k! T1 a z2 @6 T
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
8 I7 f+ W3 `0 `) A5 [
g5 C- r: b8 {; A6 N; Q基本布局:
7 u- X+ K% j9 M [& M 这是我事先生成好的iconfont:% _2 g/ y, f3 h( w7 e
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
+ {7 q- _* G3 O$ S- P" A# ]) 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> 先把默认的星星显示出来:8 V6 f* A5 c& c( Z
/* 去掉默认样式 */
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;
} 效果如下:$ u' g; v8 r$ i5 }" m, M: N! r
/ B* C0 A$ B6 a实现选中单个星星
b+ }( C1 G1 F6 P, a/ \/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:4 b# E( K g$ U' A) `' i9 |
0 Q4 |4 L- l( F实现连同兄弟元素一起高亮5 Y7 r. a9 c3 I0 O! q1 H- v; M- L
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:1 ~7 B$ O3 I6 v" D
( m. ]5 `$ ^9 W) U) ]) Z6 @6 e- d把input反向排列0 y, n4 i) v3 r0 r, }% ]
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
: g R& v. x4 S4 B8 _/ s5 U' T& v
# M& U2 ^6 o: r# c8 [& G鼠标移入预览选中效果
/ }5 x- n5 Q+ W$ k% X, N& t7 tinput[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! `4 o4 S7 {8 \, C8 }+ _& J: _
* e1 G: J5 y" y" g& U9 V. ^ ]
加入放大动画
3 O$ Z0 ~; H" t5 F6 [9 q' Minput[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
! v' |4 [: r. f( G, n# u1 Z0 D
, s2 I! [ k: v& i, C" E8 p& a
总结:1 u. M( O( P u: ?
核心代码其实就是这两段,其他都是可选的。
; W5 \2 w' N$ H2 j. T 元素反向排列:( j J) N$ [! w) @8 {
o4 ~' Y* `9 u8 c$ h0 K
display: flex;
flex-flow: row-reverse; 兄弟元素操作:" ^$ p1 R- [5 [5 X' m& i' ^
input:checked ~ input 点击查看演示>>/ v1 B# B+ x8 k) z
点击下载源码>> |