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;}
如果用外边距的话，那么会出现以下情形:
内边距的作用是保持元素连贯性以及扩大点击范围
网友评论