原理如下:
, Y5 B6 x) K: P' u7 y+ ^" I" l- 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
- 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
- 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
- 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
- 把5个radio单选框反向排列;
$ |1 N& ?+ X; Y; j3 p' F
# u3 U5 C% E% I6 v# d% l; P基本布局:
- T8 m8 D" k$ |8 R 这是我事先生成好的iconfont:! a8 k3 O' `3 J
- <link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">
一个很简洁的布局:
% v' [$ Z$ A$ p! a4 U D- <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 k x- s) d" C6 j
- /* 去掉默认样式 */
- 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;
- }
效果如下:
! B; c6 x1 [4 ], L7 X+ p9 _
+ H. Q4 p. ]5 h; k
实现选中单个星星
^/ G0 W5 t7 S" Y- /* 实现选中单个星星 */
- /* 高亮的星星 */
- input[name="rate"]:checked::after {
- content: "\e73c";
- color: var(--main);
- }
效果如下: ! S: x: H- [7 v4 z
2 x1 ~( C( m& A v9 @7 h- G5 f2 O
实现连同兄弟元素一起高亮9 @% g H+ c6 z; R1 m, g, K
- /* 实现选中单个星星 */
- /* 高亮的星星 */
- input[name="rate"]:checked::after,
- input[name="rate"]:checked~input[name="rate"]::after {
- /*实现连同兄弟元素一起高亮*/
- content: "\e73c";
- color: var(--main);
- }
效果如下: 2 E/ }" M+ k7 L; p2 E c1 }& r
3 P' G0 J& e5 I% z) z% y; o" i
把input反向排列- H8 p5 U7 _4 `
- .rate-content {
- display: flex;
- flex-flow: row-reverse;
- }
效果如下: 9 B& l; u- R9 r) ]% l* U8 S
$ I) ]' l2 |( N9 m鼠标移入预览选中效果
1 w4 H5 \$ X: w- 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);
- }
效果如下:
& X2 e( S1 M# S1 ^3 e4 k$ v
% |7 b- ]. F2 `0 N
加入放大动画
" A: x4 z6 C* g9 `- input[name="rate"] {
- transition: transform .2s ease;
- }
- input[name="rate"]:checked,
- input[name="rate"]:hover {
- transform: scale(1.2);
- }
效果如下: 3 y9 D, B) M0 y' W
# n) U0 z6 E# _$ \/ c$ _总结:: R$ h9 w. z6 Z1 }# V9 h; C
核心代码其实就是这两段,其他都是可选的。
6 } s! Y& X& P 元素反向排列: ! ]- u& ~2 R& a' o+ k) }, \* z* h( _
' K# v q/ N9 ?
- display: flex;
- flex-flow: row-reverse;
兄弟元素操作:
8 S& R+ ~7 Q, U- _' I% h" M& s% x0 | |