原理如下:7 Y9 S- D- B8 U0 x1 N$ A
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;; M* C, A5 s8 x& a9 t2 P) X( Q
7 r$ _4 k0 p+ j7 b& x
基本布局:: o2 c3 Q( p; W$ ~6 j( A& j( t
这是我事先生成好的iconfont:* M# v9 j8 {6 |9 u/ t0 J7 M
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
+ S, @% {" l' t( v* |7 Y( f<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> 先把默认的星星显示出来:, V; c7 ~) t/ r$ }
/* 去掉默认样式 */
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;
} 效果如下:( w& a3 q( Z" H' o' k+ d* ?
' A, U( v5 V) u% f+ ~( c实现选中单个星星
5 |, z1 x2 p# u9 N4 y$ a/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
: I* Z# L1 h7 R: F
. Y( A' ?; {3 a9 j9 d3 G( y
实现连同兄弟元素一起高亮( Y* ?# X4 u% Q$ m; t
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
3 c/ H$ b; `% u C I8 m; }$ h6 c
& i4 x. \' q. Z+ i4 N8 A0 Y4 o把input反向排列% A1 O; w) ?0 O, F# V
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:3 T( w+ f4 b# A; T
1 S( H; x% S' x/ @鼠标移入预览选中效果* C6 p5 {- m& ^" D9 O7 A% m
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);
} 效果如下:
`' G' W& b2 u
! B5 J& G# S3 M6 a# d5 f, t加入放大动画; b* {4 a9 ^7 z! L" ~, {
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:
& z5 Q- R% n5 p8 B# y, q e& H
: R; f7 M. `9 L; t9 Z/ d; O* q: }
总结:
+ z, L& x8 @) y, F* D" x4 J 核心代码其实就是这两段,其他都是可选的。
- j6 X' |8 G' W" `$ I7 B' {+ P/ ? 元素反向排列:! t8 j$ f: n1 l; X5 R* [$ n( d
- n* m J* y6 @9 d# adisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:4 u& _3 i9 q& n) q& f
input:checked ~ input 点击查看演示>>* P2 t& w) N4 I" v5 ~& C
点击下载源码>> |