原理如下:
, g. M( B. K5 o; m3 Z! }- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列; r: s) }& ~5 y- E$ i! [1 U
0 p4 R( V7 {8 E7 P5 ?; u基本布局:
. H" l- t/ Y" N1 w: c- D/ P5 ]( h 这是我事先生成好的iconfont:
% k+ A# L/ h- D<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
+ C' N- f% N! L<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- A* O! A H u2 d, 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;
} 效果如下:9 E/ S s* F6 |. O/ ~" M$ W1 R
8 ]# R9 @' z5 q! S7 u& Z" E. F' @实现选中单个星星: {) }2 d4 {" K( y$ o3 f5 O1 r
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
! K0 g0 O. o1 T: w
l1 T' b! b+ a) m5 h! H0 _实现连同兄弟元素一起高亮, I7 M: D A! u) B
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:# s6 `9 f) A7 K, F3 f% g
& t2 ?' K) D ~$ e% s2 r' r
把input反向排列
% f5 r7 C: q; Z$ H$ ^.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
0 P3 A. G H9 Q7 ` O; m" f
) c1 ?# `, `+ I3 j; v; U& I鼠标移入预览选中效果
3 D$ L1 N2 t1 W' q7 ginput[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);
} 效果如下:
& \" B9 g x2 f2 c4 h2 r
p6 j3 i: [6 r5 S
加入放大动画+ D$ _0 a" x' o% ]5 B ]
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:0 A/ ?; H: I( s; z' K. a8 K& s
4 U- i0 j' y' D& Y" }; e+ z/ {
总结:
# H1 {/ X% m/ W; o% N4 d 核心代码其实就是这两段,其他都是可选的。
* x5 n8 M" \! G 元素反向排列:
4 `4 ~2 n& D! Y, h& {
/ S5 C! ^3 U9 F; H* ^display: flex;
flex-flow: row-reverse; 兄弟元素操作:4 z) k# _( |' P |3 R
input:checked ~ input 点击查看演示>>
4 x7 m3 y* \0 r: v- T; T点击下载源码>> |