原理如下:( k. C- ]- M. B8 J B
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
; {- B/ Y; e& E % _/ P( E3 I9 V4 c) T6 s
基本布局:7 {5 D# ]/ q, i8 q, L8 g `& E
这是我事先生成好的iconfont:8 i/ R1 F; A7 A3 j; h( V- o- T# [
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:6 ^: D, [* Q3 c, K+ R
<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> 先把默认的星星显示出来:0 `1 C5 N+ h/ T1 W* `; 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;
} 效果如下:
7 j/ p: W6 Z7 z$ c4 R2 h
9 \* y4 R) t2 {实现选中单个星星
* r/ ~1 s9 o) ^" t; s6 S& k8 m/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:4 B5 T# k0 M$ x. p2 m
! t' L' V: ~% ^. l0 Z$ K实现连同兄弟元素一起高亮
5 H$ v6 W. H6 t' N9 s/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:1 J3 s. _$ Y5 M4 ~
$ O2 k9 X$ ?( w0 @
把input反向排列* z0 _3 \) U2 @7 A$ o
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:, d; U& R l" Z& m. ^( C% R. C
/ ~4 i+ b) d/ y2 v. X鼠标移入预览选中效果8 J8 W& M- R1 r/ w: H+ 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);
} 效果如下:
# @% d6 b8 N3 h" |+ @6 \7 Y
5 X/ ?9 A: h, `5 T" l9 V加入放大动画
2 R, a2 j: n3 e, j6 s- Ninput[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:5 _2 K4 P* G' S4 @1 Q& }7 k
# ]9 b! P! f5 p3 A" r% ~
总结:: G# a# L2 F" `+ U _
核心代码其实就是这两段,其他都是可选的。
" v# a2 v2 Y" h1 y& H9 |; `- d 元素反向排列:
: `1 t5 b4 `- V% p1 u
7 m/ V3 ^2 w) R& T1 Z9 Hdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:- z: K6 C; G4 }* R9 h* o" E c, E0 T8 B
input:checked ~ input 点击查看演示>>
' S7 }7 K- T, X" N点击下载源码>> |