专栏首页Java架构师进阶讲道理,仅3行核心css代码的rate评分组件,我被自己秀到了

讲道理,仅3行核心css代码的rate评分组件,我被自己秀到了

rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行

01

效果图

02

原理

主要是借助radio单选框,梳理如下:

去找个好看的iconfont;

借用5个radio单选框,把默认样式都去掉,显示默认的星星;

用checked伪类监听用户选中✅,由默认的星星变成高亮的星星;

然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮;

把5个radio单选框反向排列❗;

03

代码

这是我事先生成好的iconfont:

一个很简洁的布局:

先把默认的星星显示出来:

// 去掉默认样式input{ -webkit-appearance: none;border: none;outline: none;cursor: pointer;}.rate-content{$main:#ffa822;// 高亮颜色$basic:#999;// 默认颜色// 单个星星input[name="rate"]{font-family:"iconfont";// 之前引入的iconfont字体font-size:30px;padding-right:10px;// 默认显示的星星&::after {content:"\e645";color:$basic;transition: color .4sease;// 加点颜色过渡效果} }}

效果如下:

实现选中单个星星:

input[name="rate"]{// 高亮的星星&:checked { &::after {content:"\e73c";color:$main; } }}

效果如下:

实现连同兄弟元素一起高亮:

input[name="rate"] {// 高亮的星星&:checked, &:checked ~input[name="rate"] { ... }}

效果如下:

然后把星星反向排列:

.rate-content{display: flex;flex-flow: row-reverse;}

效果如下:

鼠标移入预览选中效果:

罗嗦版:

input[name="rate"] {// 高亮的星星&:checked, &:checked ~input[name="rate"], &:hover, &:hover ~input[name="rate"] { ... }}

优化版:

input[name="rate"]{// 高亮的星星&:checked, &:hover { &::after {content:"\e73c";color:$main; }// 兄弟元素一起高亮& ~input[name="rate"]{ &::after {content:"\e73c";color:$main; } } }}

效果如下:

加入放大动画:

input[name="rate"]{transition: transform .2sease;// 加入过渡效果// 高亮的星星&:checked, &:hover { ... }// 鼠标移入使星星放大&:hover {transform: scale(1.2); }}

效果如下:

04

总结

核心代码其实就是这两段,其他都是可选的

元素反向排列:

display: flex;flex-flow: row-reverse;

兄弟元素操作:

input:checked ~input

如果不用flex反向排列,还可以用rotateZ:

.rate-content{display: flex; // flex-flow:row-reverse;transform: rotateZ(180deg);}

效果如下:

z轴旋转180deg之后发现星星的头跟尾巴反过来了,那么子元素也旋转180deg即可:

.rate-content{input[name="rate"] {transform: rotateZ(180deg); }}

效果如下:

05

需要注意的细节

这里用的是内边距:

input[name="rate"] {// padding-right: 10px;margin-right:10px;}

如果用外边距的话,那么会出现以下情形:

内边距的作用是保持元素连贯性以及扩大点击范围

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用策略模式优化过多 if else 代码

    if(a){//dosomething}elseif(b){//doshomething}elseif(c){//doshomething}else{////d...

    java架构师
  • 9大行为导致Java程序员薪资过低, 你有几个?

    Java程序员薪水有高有低,有的人一个月可能拿30K、50K,有的人可能只有2K、3K。同样有五年工作经验的Java程序员,可能一个人每月拿20K,一个拿5K。...

    java架构师
  • Elasticsearch Index模块

    index.number_of_shards :一个索引应该有的主分片(primary shards)数。默认是5。而且,只能在索引创建的时候设置。(注意,每个...

    java架构师
  • 3行核心CSS代码的rate评分组件,秀到你怀疑人生

    https://coding.zhangbing.site/view.html?url=./list/css-hover-star/index.html

    ConardLi
  • 讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻

    像rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行?

    Nealyang
  • 3行核心CSS代码的rate评分组件,秀到你怀疑人生

    “ 关注 前端开发社区 ,回复"1"即可加入 前端技术交流群,回复 "2"即可免费领取 500G前端干货!

    前端老道
  • 讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻

    像rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行?

    桃翁
  • 讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻

    z轴旋转180deg之后发现星星的头跟尾巴反过来了,那么子元素也旋转180deg即可:

    用户1462769
  • 3行核心CSS代码的rate评分组件,秀到你怀疑人生

    来源:https://www.toutiao.com/a6754717611738530308 作者:子瑜说IT

    coder_koala
  • 讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻🙆‍♂️

    像rate评分组件一般都用javascript写,大概一年前,我在简书写过一篇文章原生Javascript实现星星评分组件,感兴趣的可以去看一下,很久之前写的,...

    聪明的汤姆

扫码关注云+社区

领取腾讯云代金券