原理如下:
6 E3 K$ s" \ ^( x* z4 k% \ 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库; 借用5个radio单选框,把默认样式都去掉,显示默认的星星; 用checked伪类监听用户选中,由默认的星星变成高亮的星星; 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮; 把5个radio单选框反向排列;
8 l3 I" h% C' B) c; e 1 C# b, {4 K9 `- K7 l
基本布局:
! W6 H4 k. z, f+ d# g! I' \0 y 这是我事先生成好的iconfont:
6 Y- N7 c: n5 @8 w/ v <link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:' R# N' I- v+ u0 t
<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 w Q$ r+ F) l$ G1 i /* 去掉默认样式 */
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;
} 效果如下:1 F* m" J' N" |/ y% F
, Q* s9 R9 n8 ]$ J- j
实现选中单个星星 Z, y% y5 H( w9 f6 s9 o4 F
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:1 J/ O9 I3 e) }+ e: s" z8 |! q4 a
0 U: x+ }1 T0 [3 a1 _0 U5 M2 q
实现连同兄弟元素一起高亮
- X& C& h: f; q8 Q2 g% c/ P7 C /* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
7 v# l! u6 ~9 r! k" S
( d( c8 j3 E9 k
把input反向排列 4 N- W- ?" t Z0 `9 P3 j. ]: A3 y
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
7 Q) b8 S5 d8 |7 J, h s2 Y$ {
u, ~. b8 l: m9 h, t ?, u
鼠标移入预览选中效果 0 _7 z& V! V" d! R8 `
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);
} 效果如下:
; Z- x, w, U4 l+ J7 F( f
8 { E: W* d0 v9 Q% V3 q* o. E3 q
加入放大动画 * j- y. M9 h' ^# Y3 h. l6 r7 @
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:% y- z9 b2 L L3 r2 ? ~# i: m6 M/ G
6 x4 l. W$ a2 u/ r; C2 j$ F3 r' k
总结: 5 s1 l. }" Q/ j6 F" D6 T- f/ x
核心代码其实就是这两段,其他都是可选的。
1 N) }; V/ d1 U- z8 }8 d* d 元素反向排列:
% ]& c l( h* c0 I B) a , S, i, `" E, t. I. t
display: flex;
flex-flow: row-reverse; 兄弟元素操作:! [' F( t9 E5 w
input:checked ~ input点击查看演示>> # i/ ~8 [4 E ~5 c F9 O% i* n7 o
点击下载源码>>