Radio by Ratinax

1.radio-input {
2  display: flex;
3  scale: 0.15;
4  transform: rotate(180deg);
5}
6
7.star {
8  margin: 1em;
9  appearance: none;
10  --color: white;
11  border-left: 6.4721359549996em solid transparent;
12  border-right: 6.4721359549996em solid transparent;
13  border-bottom: 4em solid var(--color);
14  transform: rotate(0deg);
15  cursor: pointer;
16}
17
18.star:before {
19  content: "";
20  border-left: 6.4721359549996em solid transparent;
21  border-right: 6.4721359549996em solid transparent;
22  border-top: 4em solid var(--color);
23  position: absolute;
24  left: -6.4721359549996em;
25  transform: rotate(108deg);
26}
27
28.star:after {
29  content: "";
30  border-left: 6.4721359549996em solid transparent;
31  border-right: 6.4721359549996em solid transparent;
32  border-top: 4em solid var(--color);
33  position: absolute;
34  left: -6.4721359549996em;
35  transform: rotate(253deg);
36}
37
38.radio-input > .star:hover ~ .star,
39.radio-input > .star:hover,
40.radio-input > .star:checked ~ .star,
41.radio-input > .star:checked {
42  --color: yellow;
43}
44
45.radio-input > .star:checked ~ .star,
46.radio-input > .star:checked {
47  animation: rotate 0.5s linear forwards;
48  transform: rotate(360deg);
49  transition: transform 0.3s;
50}
51
52@keyframes rotate {
53  0% {
54    transform: rotate(0deg);
55  }
56  50% {
57    scale: 1.5;
58  }
59  100% {
60    transform: rotate(360deg);
61  }
62}
63