HTML的部分：
<div class="rate-content" style="width:150px">
<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>
css部分：
//先去隱藏input
input {
-webkit-appearance: none;
border: none;
outline: none;
cursor: pointer;
}
//默認星星的顏色
.rate-content {
display: flex;
flex-flow: row-reverse;
$main: #ffa8ff;
$basic: #999;
input[name="rate"] {
font-family: "iconfont";
font-size: 30;
margin:0 10px;
&::after {
content: "\e645";
color: $basic;
transition: color .4s ease;
}
}
input[name="rate"] {
transition: transform .2s ease; // 加入過渡效果
// 高亮的星
&:checked,
&:hover {
&::after {
content: "\e73c";
color: $main;
}
& ~ input[name="rate"] {
&::after {
content: "\e73c";
color: $main
}
}
}
//hover 放大
&:hover {
transform: scale(1.2);
}
}
}