原理如下:
; S5 q+ r* _- }( `/ g; K% e- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;) P6 f8 R6 E/ n- e
/ U7 z7 V8 q/ A8 O. z
基本布局: Q8 y9 M0 R" k& s S5 Z
这是我事先生成好的iconfont:
* V: \# h. Z% |<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"> 一个很简洁的布局:
! k/ {, w- N7 W% J" 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> 先把默认的星星显示出来:
8 T$ d0 j. a2 L- n D/* 去掉默认样式 */
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 ~/ D. O% B$ v& C4 P" J
; I! ]* U+ E9 ]% ?( [) ~6 C5 E( ^
实现选中单个星星
4 @0 O4 A( Z6 W/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
content: "\e73c";
color: var(--main);
} 效果如下:1 C- z. m' U T0 ^5 S
/ _) u* C: B1 p7 ?# p
实现连同兄弟元素一起高亮0 j# q# q3 r, c7 ^7 I4 |
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
/*实现连同兄弟元素一起高亮*/
content: "\e73c";
color: var(--main);
} 效果如下:1 z/ R6 U; j) g" p+ q( V5 V+ B
6 q) k. E# ?- k; `( X1 C( H; L
把input反向排列$ d |" s6 {8 U! b; \$ X
.rate-content {
display: flex;
flex-flow: row-reverse;
} 效果如下:
4 c7 S. h# `, v" h4 x
( t* \1 }( E0 C# n8 d4 f1 T
鼠标移入预览选中效果
: w4 Y7 W0 t$ |$ K, m$ s0 iinput[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);
} 效果如下:
- O; O \% k" X+ ]0 B/ O. d
) T; e( q& F6 L7 E' e加入放大动画
0 y0 x" V; e9 H7 A) I! a) y' Hinput[name="rate"] {
transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
transform: scale(1.2);
} 效果如下:4 I ~) D5 d5 y' ^
; x# k2 j4 y8 L2 S% k3 W* e4 Y$ a总结:4 z |9 y- P: }) G) l9 j( u7 x
核心代码其实就是这两段,其他都是可选的。
& Z* _1 k/ N; p7 ~ 元素反向排列:8 ?/ [. I$ Q# ]: C
! @/ ?% {, u5 s: k! t# v9 vdisplay: flex;
flex-flow: row-reverse; 兄弟元素操作:, j7 v3 u7 k7 z$ H8 U; O/ p2 U
input:checked ~ input 点击查看演示>>( U$ t1 _" F+ X0 u4 G
点击下载源码>> |