原理如下:+ v' D+ r8 O# ~( i" }" n
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;! O+ N# W$ }' X- _2 B/ Y
" g9 l% }4 D( H% i# N( u
基本布局:
& `- I0 X' H( o 这是我事先生成好的iconfont:
0 X2 |: k4 i3 A/ D<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:' U# u$ v& u/ Y# ?7 {
<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> 先把默认的星星显示出来:5 S" J) K4 R& |& [9 C" J6 H
/* 去掉默认样式 */
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;
} 效果如下:/ I$ N* c+ g4 j% K6 p
- T1 I! Z) a( y4 g+ |) D2 J
实现选中单个星星9 l5 [. u: x% \
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:" F- k" M% @5 r( C! E
% C) x! V1 v; b) P2 l1 q2 W2 U) D; E
实现连同兄弟元素一起高亮
0 U7 v' {. w3 W. d/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
9 u& W* m; }6 x% O& N" q
) ~) T I: s# u3 R1 @7 ~* f! [- q把input反向排列
* [! V, c2 t. T4 X, X) o.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
: A6 _4 J# k$ O; }, {4 A7 o
* _8 \3 C' O8 E0 x! \鼠标移入预览选中效果
. z. v' ~& f0 F- Jinput[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);
} 效果如下:( Y* i* v- I2 F4 B& |
# ]* D' ~. E" z6 O# N& p9 p$ y
加入放大动画
# B! Y w2 _1 F( P, Iinput[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:/ Y f' y: ~4 x% v+ [ I
/ f* k2 \9 e5 l& K$ f% |! y
总结:- E: D, w1 C# H0 v
核心代码其实就是这两段,其他都是可选的。- |% v' M8 V! b5 l! g8 _
元素反向排列:1 h" [9 i' L# b$ k: e; b
- K: J" M7 y! z5 q9 x
display: flex;
flex-flow: row-reverse; 兄弟元素操作:$ G' u. l/ b$ g
input:checked ~ input 点击查看演示>>, d! d3 b6 D* K" S6 q
点击下载源码>> |