QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 2630|回复: 0

[HTML/CSS/JS] 仅含有CSS代码的rate评分组件

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1322 小时
   最后登录 : 2026-1-12

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-3-15 10:17:04 | 显示全部楼层 |阅读模式
原理如下:
9 C. D! Q2 ~) }. R) x2 k
  • 去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库;
  • 借用5个radio单选框,把默认样式都去掉,显示默认的星星;
  • 用checked伪类监听用户选中,由默认的星星变成高亮的星星;
  • 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;
  • 把5个radio单选框反向排列;
    " r( D( o: |9 M  D
% c, ?+ A1 b5 o1 k
基本布局:" L3 O$ B- n- e6 I3 C
       这是我事先生成好的iconfont:
: |3 _& i! c+ ^6 e) m, u
<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">
      一个很简洁的布局:
! R1 `- ~. }/ N* Y
<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>
      先把默认的星星显示出来:
6 c4 K1 K. S. _
/* 去掉默认样式 */
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 f$ ^+ g, y6 [1 p) u% t
1.jpg 0 M+ M9 H3 ~: p7 X6 A" J0 R
实现选中单个星星- v: i# w7 P( B1 `1 H! `
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after {
  content: "\e73c";
  color: var(--main);
}
      效果如下:* c- j" B0 t0 S( J; T
2.gif
1 v* h. k, [6 S- \实现连同兄弟元素一起高亮( B4 M2 x) y* h0 `0 L
/* 实现选中单个星星 */
/* 高亮的星星 */
input[name="rate"]:checked::after,
input[name="rate"]:checked~input[name="rate"]::after {
  /*实现连同兄弟元素一起高亮*/
  content: "\e73c";
  color: var(--main);
}
      效果如下:
  l3 q0 ]! N" t2 H 3.gif ( I( p! ^9 \; Y9 M. _; l
把input反向排列
. l4 |0 A# k# i$ ~
.rate-content {
  display: flex;
  flex-flow: row-reverse;
}
      效果如下:
$ n9 u/ O, ^* s! u- c3 G' ]; D3 m 4.gif
4 P! t1 K/ l: ^6 e8 q鼠标移入预览选中效果
  L; |7 X9 m+ Z4 D
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);
}
      效果如下:
  @, l+ {; |0 G. Y 5.gif
9 t2 {- \3 u' V7 {9 N加入放大动画9 k2 X1 U: y* E. A4 c9 j) F7 f4 ^
input[name="rate"] {
  transition: transform .2s ease;
}
input[name="rate"]:checked,
input[name="rate"]:hover {
  transform: scale(1.2);
}
      效果如下:
+ {' Z# L2 Z" A* X) s) B! l 6.gif
, y7 K: J/ y6 v9 q( g总结:
7 _; ], M7 d% f) m# m$ C       核心代码其实就是这两段,其他都是可选的。
6 Q$ V* A8 j3 h1 N' w8 ~: @4 S       元素反向排列:5 d) B# k$ S0 A

7 x9 j/ C1 Y' ?+ x( h
display: flex;
flex-flow: row-reverse;
      兄弟元素操作:  D! T* H) {6 H
input:checked ~ input
点击查看演示>>7 @; }4 K9 w; y$ ]# t; g- X
点击下载源码>>
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2026-2-7 20:53

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表