mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
105 lines
No EOL
1.9 KiB
HTML
105 lines
No EOL
1.9 KiB
HTML
<div class="radio-input">
|
|
<input
|
|
value="value-1"
|
|
name="value-radio"
|
|
id="value-1"
|
|
type="radio"
|
|
class="star s1"
|
|
/>
|
|
<input
|
|
value="value-2"
|
|
name="value-radio"
|
|
id="value-2"
|
|
type="radio"
|
|
class="star s2"
|
|
/>
|
|
<input
|
|
value="value-3"
|
|
name="value-radio"
|
|
id="value-3"
|
|
type="radio"
|
|
class="star s3"
|
|
/>
|
|
<input
|
|
value="value-4"
|
|
name="value-radio"
|
|
id="value-4"
|
|
type="radio"
|
|
class="star s4"
|
|
/>
|
|
<input
|
|
value="value-5"
|
|
name="value-radio"
|
|
id="value-5"
|
|
type="radio"
|
|
class="star s5"
|
|
/>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Ratinax - Tags: */
|
|
.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: rotate 0.5s linear forwards;
|
|
transform: rotate(360deg);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
50% {
|
|
scale: 1.5;
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|