原理如下:
' h3 S5 v a: J7 w9 J2 `& F- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;* w) G& M& _- _) Z
- l& T. d: H/ }0 J0 c# W基本布局:
% m$ E" ]0 R0 [ 这是我事先生成好的iconfont:
" a4 @* ]8 q* f<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
. N+ Q! Y! ^4 q3 Y) g$ ?<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> 先把默认的星星显示出来:) C$ P' k0 x7 n8 v: Y. V, V$ x# v
/* 去掉默认样式 */
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;
} 效果如下:) r8 I% X/ @2 S. K9 n' C9 [9 g7 ]
( \$ U4 \: t$ h实现选中单个星星
; h3 T) {" i4 u6 D+ e5 t2 _. |/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:7 ?/ G5 J2 P, a$ S. m) ^
9 M& l6 B" O: o, d实现连同兄弟元素一起高亮; o. Q9 ^/ r0 h$ ]7 G. |: @
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
: \* G! _1 b( x' Z/ \9 a
; i: w, X+ ?* f0 {# ~* W把input反向排列
* S; ^' y2 e7 O1 t2 Y.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
" r0 k1 b9 a5 R& e4 \
" B1 @% D; W6 T4 T9 U. Y鼠标移入预览选中效果. g+ Y$ T a# j8 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);
} 效果如下:
3 d' m2 g! P! Y' T
M% F: F0 j# |9 k" |1 Z; B& i2 ~
加入放大动画' H: [" G, @) [: z& p
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:! Y, r g: N! e/ u6 d$ K& |9 z
/ O" e1 _; t, |总结:7 g1 {: L9 d9 m8 O6 R6 k4 t; Q
核心代码其实就是这两段,其他都是可选的。
1 ~3 p2 N/ W/ P4 J, Q1 a7 \; f/ U. P 元素反向排列:
6 W+ m& D& z" ~5 |0 j% u2 S) |% Q+ u! G
display: flex;
flex-flow: row-reverse; 兄弟元素操作:( A8 s! n3 q t- ~) j2 e1 U
input:checked ~ input 点击查看演示>>! k* q( z) }+ V
点击下载源码>> |