之前自己写过rate评分的效果,都是UI给的雪碧图,然后自己拼凑,所以这次我研究了一下用纯css来实现评分效果。
效果图
引入阿里图表库
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css">
dom结构
<div class="rate-content">
<input type="radio" name="rate" value="1">
<input type="radio" name="rate" value="2">
<input type="radio" name="rate" value="3">
<input type="radio" name="rate" value="4">
<input type="radio" name="rate" value="5">
</div>
画默认的星星
/* 去掉默认样式 */
input {
-webkit-appearance: none;
border: none;
outline: none;
cursor: pointer;
}
.rate-content {
/* 高亮颜色 */
--colorActive: #ffa822;
/* 默认颜色 */
--colorDefault: #999;
width: 300px;
}
/* 单个星星 */
.rate-content input[name="rate"] {
font-family: "iconfont";
/* 之前引入的iconfont字体 */
font-size: 30px;
overflow: hidden;
}
/* 默认显示的星星 */
.rate-content input::after {
content: "\e645";
color: var(--colorDefault);
/* 加点颜色过渡效果 */
transition: color .4s ease;
}
效果图如下:
实现选中单个星星
.rate-content input[name="rate"]:checked::after {
/* 高亮的星星 */
content: "\e73c";
color: var(--colorActive);
}
效果图如下:
连同兄弟一起选中
/*单个的选中效果*/
.rate-content input[name="rate"]:checked::after,
/*连同剩下的兄弟一起选中*/
.rate-content input[name="rate"]:checked~input[name="rate"]::after {
content: "\e73c";
color: var(--colorActive);
}
效果图如下:
将input反向排列
鼠标移入预览效果
.rate-content input[name="rate"]:checked::after,
.rate-content input[name="rate"]:checked~input[name="rate"]::after,
/*单个的鼠标移入效果*/
.rate-content input[name="rate"]:hover::after,
/*连同剩下的兄弟一起*/
.rate-content input[name="rate"]:hover~input[name="rate"]::after {
/* 高亮的星星 */
content: "\e73c";
color: var(--colorActive);
}
效果图如下:
星星的放大效果
/*移入放大*/
.rate-content input[name="rate"]:hover {
transform: scale(1.2);
}
效果图如下: