Radio by yaroslavas2001

1.radio-input {
2  display: flex;
3  flex-direction: column;
4}
5
6.radio_item {
7  display: flex;
8  align-items: center;
9  margin: 3px;
10}
11
12.radio {
13  height: 50px;
14  width: 50px;
15  opacity: 0;
16  margin: 0px;
17  margin-right: 1.5em;
18  cursor: pointer;
19}
20
21.pointer {
22  cursor: pointer;
23}
24
25.sphere {
26  position: absolute;
27  max-height: 50px;
28  max-width: 50px;
29  border-radius: 50%;
30  z-index: -1;
31}
32/* hand */
33.top_hand {
34  animation: hand 6.66s linear infinite;
35}
36
37.bottom_hand {
38  animation: hand 6.66s linear infinite;
39}
40
41@keyframes hand {
42  20% {
43    transform: rotate3d(0, 0, 1, 15deg);
44  }
45
46  90% {
47    transform: rotate3d(0, 0, 1, -3deg);
48  }
49
50  100% {
51    transform: rotate3d(0, 0, 1, 0deg);
52  }
53}
54
55/* pick option - change image */
56.radio:checked ~ .earth_input {
57  display: none;
58}
59
60.earth_input_planet {
61  display: none;
62}
63
64.radio:checked ~ .earth_input_planet {
65  display: block;
66  transform: rotateZ(23.4deg);
67  fill: rgba(56, 192, 56, 0.148);
68  stroke: rgba(0, 104, 241, 0.788);
69}
70
71.radio:checked ~ .moon_input {
72  display: none;
73}
74
75.moon_input_planet {
76  display: none;
77}
78
79.radio:checked ~ .moon_input_planet {
80  display: block;
81  fill: rgba(237, 234, 234, 0.224);
82  stroke: rgba(174, 171, 171, 0.1);
83  margin-left: 13px;
84  transform: rotateZ(-23.4deg);
85}
86
87.radio:checked ~ .mars_input {
88  display: none;
89}
90
91.mars_input_planet {
92  display: none;
93}
94
95.radio:checked ~ .mars_input_planet {
96  display: block;
97  fill: rgba(192, 54, 0, 0.114);
98  stroke: rgba(255, 254, 254, 0.162);
99  margin-left: 8px;
100  transform: rotateZ(43.9deg);
101}
102
103.radio:checked ~ label {
104  font-weight: bold;
105}
106/* sphere_lines */
107.sphere_lines, .sphere_lines_back {
108  border: 1px dotted #fff;
109  border-radius: 50%;
110  height: 50px;
111  transform-style: preserve-3d;
112  width: 50px;
113  position: absolute;
114  z-index: -1;
115  transition: all 0.5s ease-in-out;
116}
117
118.sphere_lines {
119  animation: spin 6.66s linear infinite;
120}
121
122.sphere_lines_back {
123  animation: spin_back 6.66s linear infinite;
124}
125
126.sphere_lines_back::before,
127 .sphere_lines_back::after,.sphere_lines::before,
128 .sphere_lines::after {
129  border: 1px dotted #fff;
130  border-radius: 50%;
131  content: '';
132  height: 50px;
133  left: 0;
134  position: absolute;
135  top: 0;
136  width: 50px;
137  transition: all 0.5s ease-in-out;
138}
139
140.sphere_lines_back::before , .sphere_lines::before {
141  transform: rotateX(-66.6deg);
142}
143
144.sphere_lines_back::after,.sphere_lines::after {
145  transform: rotateX(66.6deg);
146}
147
148.radio:hover ~ .sphere_lines,
149 .radio:hover ~.sphere_lines_back,
150 .radio:hover ~ .sphere_lines_back::before,
151 .radio:hover ~ .sphere_lines_back::after,
152 .radio:hover ~ .sphere_lines::before,
153 .radio:hover ~ .sphere_lines::after {
154  border: 1.6px dotted #fff;
155}
156
157@keyframes spin {
158  0% {
159    transform: rotateY(0deg) rotateX(10deg) rotateZ(0deg);
160  }
161
162  100% {
163    transform: rotateY(360deg) rotateX(10deg) rotateZ(0deg);
164  }
165}
166
167@keyframes spin_back {
168  0% {
169    transform: rotateY(70deg) rotateX(0deg) rotateZ(0deg);
170  }
171
172  100% {
173    transform: rotateY(70deg) rotateX(0deg) rotateZ(360deg);
174  }
175}
176
177
178