پیشنمایش زنده
کد HTML
<div class="radio-input">
<input
class="star s1"
type="radio"
id="value-1"
name="value-radio"
value="value-1"
/>
<input
class="star s2"
type="radio"
id="value-2"
name="value-radio"
value="value-2"
/>
<input
class="star s3"
type="radio"
id="value-3"
name="value-radio"
value="value-3"
/>
<input
class="star s4"
type="radio"
id="value-4"
name="value-radio"
value="value-4"
/>
<input
class="star s5"
type="radio"
id="value-5"
name="value-radio"
value="value-5"
/>
</div>
کد CSS
.radio-input {
display: flex;
scale: 0.15;
transform: rotate(180deg);
}
.star {
margin: 1em;
appearance: none;
--color: white;
border-left: 6.4721359549996em solid transparent;
border-right: 6.4721359549996em solid transparent;
border-bottom: 4em solid var(--color);
transform: rotate(0deg);
cursor: pointer;
}
.star:before {
content: "";
border-left: 6.4721359549996em solid transparent;
border-right: 6.4721359549996em solid transparent;
border-top: 4em solid var(--color);
position: absolute;
left: -6.4721359549996em;
transform: rotate(108deg);
}
.star:after {
content: "";
border-left: 6.4721359549996em solid transparent;
border-right: 6.4721359549996em solid transparent;
border-top: 4em solid var(--color);
position: absolute;
left: -6.4721359549996em;
transform: rotate(253deg);
}
.radio-input > .star:hover ~ .star,
.radio-input > .star:hover,
.radio-input > .star:checked ~ .star,
.radio-input > .star:checked {
--color: yellow;
}
.radio-input > .star:checked ~ .star,
.radio-input > .star:checked {
animation: grow 0.5s linear forwards;
transition: transform 0.3s;
}
@keyframes grow {
50% {
scale: 2;
}
}