如何用css实现一个rate评分

今天小编给大家分享一下如何用css实现一个rate评分的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站设计制作、成都做网站、沂南网络推广、成都小程序开发、沂南网络营销、沂南企业策划、沂南品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供沂南建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

梳理如下：

去找个好看的iconfont，[Iconfont-阿里巴巴矢量图标库]、；

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

用checked伪类监听用户选中，由默认的星星变成高亮的星星；

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

把5个radio单选框反向排列 ；

代码

这是我事先生成好的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 .4s ease; // 加点颜色过渡效果

}

}

}

实现选中单个星星：

input[name="rate"] {

// 高亮的星星

&:checked {

&::after {

content: "\e73c";

color: $main;

}

}

}

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

input[name="rate"] {

// 高亮的星星

&:checked,

&:checked —— input[name="rate"] {

...

}

}

效果如下：

然后把input反向排列：

.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 .2s ease; // 加入过渡效果

// 高亮的星星

&:checked,

&:hover {

...

}

// 鼠标移入使星星放大

&:hover {

transform: scale(1.2);

}

}

总结

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

元素反向排列：

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);

}

}

需要注意的细节

input[name="rate"] {

// padding-right: 10px;

margin-right: 10px;

}

以上就是“如何用css实现一个rate评分”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。