Checkbox by Uncannypotato69

1.checkboxLabel {
2  --rotate-offset: 45deg;
3  --time-offset: 200ms;
4  --translate-offset: 1rem;
5  --delay: 250ms;
6  --total-duration: calc(var(--time-offset) + var(--delay) * 7);
7
8  position: relative;
9  height: 3rem;
10  aspect-ratio: 1/1;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  transition: transform var(--total-duration) ease-in-out;
15}
16
17.bar {
18  position: absolute;
19  height: 3rem;
20  width: 0.25rem;
21  border-radius: 0.125rem;
22  background-color: white;
23  top: -50%;
24  transform-origin: bottom;
25  z-index: 0;
26}
27
28#bar1 {
29  rotate: calc(var(--rotate-offset));
30  transition: all var(--time-offset) ease-in;
31  transition-delay: calc(var(--delay) * 0);
32  transform: translateY(calc(var(--translate-offset) * -1));
33}
34#bar2 {
35  rotate: calc(var(--rotate-offset) * 2);
36  transition: all var(--time-offset) ease-in;
37  transition-delay: calc(var(--delay) * 1);
38  transform: translateY(calc(var(--translate-offset) * -1));
39}
40#bar3 {
41  rotate: calc(var(--rotate-offset) * 3);
42  transition: all var(--time-offset) ease-in;
43  transition-delay: calc(var(--delay) * 2);
44  transform: translateY(calc(var(--translate-offset) * -1));
45}
46#bar4 {
47  rotate: calc(var(--rotate-offset) * 4);
48  transition: all var(--time-offset) ease-in;
49  transition-delay: calc(var(--delay) * 3);
50  transform: translateY(calc(var(--translate-offset) * -1));
51}
52#bar5 {
53  rotate: calc(var(--rotate-offset) * 5);
54  transition: all var(--time-offset) ease-in;
55  transition-delay: calc(var(--delay) * 4);
56  transform: translateY(calc(var(--translate-offset) * -1));
57}
58#bar6 {
59  rotate: calc(var(--rotate-offset) * 6);
60  transition: all var(--time-offset) ease-in;
61  transition-delay: calc(var(--delay) * 5);
62  transform: translateY(calc(var(--translate-offset) * -1));
63}
64#bar7 {
65  rotate: calc(var(--rotate-offset) * 7);
66  transition: all var(--time-offset) ease-in;
67  transition-delay: calc(var(--delay) * 6);
68  transform: translateY(calc(var(--translate-offset) * -1));
69}
70#bar8 {
71  rotate: calc(var(--rotate-offset) * 8);
72  transition: all var(--time-offset) ease-in;
73  transition-delay: calc(var(--delay) * 7);
74  transform: translateY(calc(var(--translate-offset) * -1));
75}
76
77#checkbox:checked ~ #bar1 {
78  transform: translateY(0);
79  background-color: #ffadad;
80}
81#checkbox:checked ~ #bar2 {
82  transform: translateY(0);
83  background-color: #ffd6a5;
84}
85#checkbox:checked ~ #bar3 {
86  transform: translateY(0);
87  background-color: #fdffb6;
88}
89#checkbox:checked ~ #bar4 {
90  transform: translateY(0);
91  background-color: #caffbf;
92}
93#checkbox:checked ~ #bar5 {
94  transform: translateY(0);
95  background-color: #9bf6ff;
96}
97#checkbox:checked ~ #bar6 {
98  transform: translateY(0);
99  background-color: #a0c4ff;
100}
101#checkbox:checked ~ #bar7 {
102  transform: translateY(0);
103  background-color: #bdb2ff;
104}
105#checkbox:checked ~ #bar8 {
106  transform: translateY(0);
107  background-color: #ffc6ff;
108}
109
110.cover {
111  height: 4rem;
112  aspect-ratio: 1/1;
113  border-radius: 50%;
114  background: #2a3439;
115  position: absolute;
116  top: 50%;
117  left: 50%;
118  transform: translate(-50%, -50%);
119}
120
121.checkboxLabel:has(:checked) {
122  transform: rotate(-360deg);
123}
124
125.cover2 {
126  height: 2rem;
127  aspect-ratio: 1/1;
128  border-radius: 50%;
129  background: #91a3b0;
130  position: absolute;
131  top: 50%;
132  left: 50%;
133  transform: translate(-50%, -50%);
134  outline-width: 0.25rem;
135  outline: solid;
136  outline-color: #b2ffff;
137}
138
139.inCover2 {
140  height: 100%;
141  aspect-ratio: 1/1;
142  position: relative;
143  border-radius: 50%;
144  overflow: hidden;
145}
146
147.inCover2 .rainbow {
148  height: 100%;
149  width: 100%;
150  top: 50%;
151  left: 50%;
152  transform: translate(-50%, -50%);
153  position: absolute;
154  display: flex;
155  flex-direction: column;
156  justify-content: center;
157  align-items: center;
158}
159
160.rainbow div {
161  flex: 1;
162  width: 100%;
163}
164
165.rainbow div:nth-child(1) {
166  background-color: #ffadad;
167}
168.rainbow div:nth-child(2) {
169  background-color: #ffd6a5;
170}
171.rainbow div:nth-child(3) {
172  background-color: #fdffb6;
173}
174.rainbow div:nth-child(4) {
175  background-color: #caffbf;
176}
177.rainbow div:nth-child(5) {
178  background-color: #9bf6ff;
179}
180.rainbow div:nth-child(6) {
181  background-color: #a0c4ff;
182}
183.rainbow div:nth-child(7) {
184  background-color: #bdb2ff;
185}
186
187.nut {
188  height: 0.3rem;
189  aspect-ratio: 1/1;
190  background-color: white;
191  border-radius: 50%;
192  position: absolute;
193  z-index: 2;
194  top: 0px;
195  transform: translateY(-5px);
196  transform-origin: 50% 500%;
197}
198
199#nut1 {
200  rotate: calc(var(--rotate-offset));
201}
202#nut2 {
203  rotate: calc(var(--rotate-offset) * 2);
204}
205#nut3 {
206  rotate: calc(var(--rotate-offset) * 3);
207}
208#nut4 {
209  rotate: calc(var(--rotate-offset) * 4);
210}
211#nut5 {
212  rotate: calc(var(--rotate-offset) * 5);
213}
214#nut6 {
215  rotate: calc(var(--rotate-offset) * 6);
216}
217#nut7 {
218  rotate: calc(var(--rotate-offset) * 7);
219}
220#nut8 {
221  rotate: calc(var(--rotate-offset) * 8);
222}
223
224.lock {
225  position: absolute;
226  height: 1.5rem;
227  aspect-ratio: 1/1;
228  top: 50%;
229  left: 50%;
230  transform: translate(-50%, -50%);
231  opacity: 0;
232  transition: opacity 200ms ease-in;
233  transition-delay: var(--total-duration);
234}
235
236#checkbox:checked ~ .lock {
237  opacity: 1;
238}
239