如何用css实现一个rate评分

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

　　梳理如下：

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

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

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

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

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

　　代码

　　这是我事先生成好的iconfont

　　<link rel="stylesheet" href="//at.alicdn.com/t/font_1356455_c5d3D3ohlbq.css">

　　一个很简洁的布局：

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

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

　　// 去掉默认样式

　　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 &mdash;&mdash; input[name="rate"] {

　　...

　　}

　　}

　　效果如下：

　　然后把input反向排列：

　　.rate-content {

　　display: flex;

　　flex-flow: row-reverse;

　　}

　　鼠标移入预览选中效果：

　　罗嗦版：

　　input[name="rate"] {

　　// 高亮的星星

　　&:checked,

　　&:checked &mdash;&mdash; input[name="rate"],

　　&:hover,

　　&:hover &mdash;&mdash; input[name="rate"] {

　　...

　　}

　　}

　　优化版：

　　input[name="rate"] {

　　// 高亮的星星

　　&:checked,

　　&:hover {

　　&::after {

　　content: "\e73c";

　　color: $main;

　　}

　　// 兄弟元素一起高亮

　　& &mdash;&mdash; 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 &mdash;&mdash; 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评分”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网JavaScript频道。