原理如下:1 h. V1 P* B7 T/ L
- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;9 A/ x i$ A5 D6 ]" U
4 u f, h2 V* N" {' Z
基本布局:$ P# O- {# h' H3 S7 D7 e6 N D
这是我事先生成好的iconfont:! g: E" O# _3 n# v
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
9 n& v1 a. T# F# x$ 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& f& m3 w& F5 N# Q/* 去掉默认样式 */
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;
} 效果如下:7 ~' h: ^% u4 @+ |
% i! u$ k, {- O( O) [0 E
实现选中单个星星
& l( x! M' @; }1 Q5 C+ o/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:
: G- E) v& v" c
9 e! ^" e1 G: m- d+ L! w) F
实现连同兄弟元素一起高亮
( L" G9 C0 u/ O& f) h/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:
( O: R1 X" M+ ]
( x4 G5 ]8 P. l1 h
把input反向排列
( ]8 a% j6 z, L% Z3 A/ j. ].rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:1 ~" b/ J5 f( Y) h+ u8 Z
# c# b; d! D( o7 v- R9 ^
鼠标移入预览选中效果- V; {1 O1 V b3 L& A# ?4 i# ?
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);
} 效果如下:) E1 F0 E" V0 x% `
+ b) t) q5 v2 E3 L2 N
加入放大动画4 Y0 [8 m/ I2 B9 {+ q, V4 W
input[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:& k" |, ~* j, Z" b# V8 d3 k
6 E& e9 W1 x% @" u( [总结:+ W' ^ m3 f: f4 b
核心代码其实就是这两段,其他都是可选的。1 b: Q; U+ i0 X& B0 q
元素反向排列:
; s, L5 V! C, P# x1 @& A
/ V+ C# S0 A2 D, gdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:0 q9 {0 _( B ?( Y) L
input:checked ~ input 点击查看演示>>' a- v- o: v$ W4 {- m: c* q
点击下载源码>> |