原理如下:; Y. }0 s! o$ h- \2 J1 P. [
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;3 S. I: N8 z1 {* n3 `" J
3 _- L% Q5 I+ q4 v: m
基本布局:7 S- O d/ L' o6 Q
这是我事先生成好的iconfont:! q. \( F! v, r$ }4 H
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
5 j- Z! C: c* Z2 y, @6 N2 [, 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 Z- m0 [4 x, t* p4 ^8 J; x7 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;
} 效果如下:
/ B' X( W' ~& v3 D4 t! y$ K
- j- y, d* Z n
实现选中单个星星/ g9 z) y- d9 p' v) R# `
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:1 y% w( a# w4 o. T
8 v# ~1 z j/ H8 e7 L
实现连同兄弟元素一起高亮9 x, h, P* V/ m, S; O
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
& j/ H2 E% O! M/ ?
) T# i1 l3 _, c _1 }
把input反向排列9 b# r) [: M5 e6 s. R) Y9 d& @4 @
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
; T& t0 C+ C$ g0 {+ v8 z; D
' |5 r: N! |8 @5 f1 B% W/ K8 Q
鼠标移入预览选中效果! S8 {. S: O& Q% f' U8 B* S
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);
} 效果如下:
: l7 F* j0 c. R' T$ t4 I1 k
c: L; J; j! h' C$ R) T加入放大动画
- R# K8 ^' L( a) ]9 f0 L: Jinput[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:4 J0 H) Y+ r8 q
+ C T( H+ s0 ^; i
总结:+ R9 T7 h' w3 i ^' O$ P
核心代码其实就是这两段,其他都是可选的。
3 I: `% N* N, g 元素反向排列:
4 v6 o+ ?: q! p4 S6 H8 S' W% ~5 W' d9 y6 H6 p" t% ~) ~1 O
display: flex;
flex-flow: row-reverse; 兄弟元素操作:8 D! J% z8 L- C O% e, z' Y
input:checked ~ input 点击查看演示>>
( O% T& k3 N9 R5 l3 c8 p; V; `点击下载源码>> |