Post by JkHuger

Made by

@JkHuger

Theme:

Dark

#loader#astronaut

#212121

1.7K views

CSSAdd prefixes

1@keyframes snow {
2  0% {
3    opacity: 0;
4    transform: translateY(0px);
5  }
6
7  20% {
8    opacity: 1;
9  }
10
11  100% {
12    opacity: 1;
13    transform: translateY(650px);
14  }
15}
16
17@keyframes astronaut {
18  0% {
19    transform: rotate(0deg);
20  }
21
22  100% {
23    transform: rotate(360deg);
24  }
25}
26
27.box-of-star1,
28.box-of-star2,
29.box-of-star3,
30.box-of-star4 {
31  width: 100%;
32  position: absolute;
33  z-index: 10;
34  left: 0;
35  transform: translateY(650px);
36  height: 700px;
37}
38
39.box-of-star1 {
40  animation: snow 5s linear infinite;
41}
42
43.box-of-star2 {
44  animation: snow 5s -1.64s linear infinite;
45}
46
47.box-of-star3 {
48  animation: snow 5s -2.30s linear infinite;
49}
50
51.box-of-star4 {
52  animation: snow 5s -3.30s linear infinite;
53}
54
55.star {
56  width: 3px;
57  height: 3px;
58  border-radius: 50%;
59  background-color: #FFF;
60  position: absolute;
61  z-index: 10;
62  opacity: 0.7;
63}
64
65.star:before {
66  content: "";
67  width: 6px;
68  height: 6px;
69  border-radius: 50%;
70  background-color: #FFF;
71  position: absolute;
72  z-index: 10;
73  top: 80px;
74  left: 70px;
75  opacity: .7;
76}
77
78.star:after {
79  content: "";
80  width: 8px;
81  height: 8px;
82  border-radius: 50%;
83  background-color: #FFF;
84  position: absolute;
85  z-index: 10;
86  top: 8px;
87  left: 170px;
88  opacity: .9;
89}
90
91.star-position1 {
92  top: 30px;
93  left: 20px;
94}
95
96.star-position2 {
97  top: 110px;
98  left: 250px;
99}
100
101.star-position3 {
102  top: 60px;
103  left: 570px;
104}
105
106.star-position4 {
107  top: 120px;
108  left: 900px;
109}
110
111.star-position5 {
112  top: 20px;
113  left: 1120px;
114}
115
116.star-position6 {
117  top: 90px;
118  left: 1280px;
119}
120
121.star-position7 {
122  top: 30px;
123  left: 1480px;
124}
125
126.astronaut {
127  width: 250px;
128  height: 300px;
129  position: absolute;
130  z-index: 11;
131  top: calc(50% - 150px);
132  left: calc(50% - 125px);
133  animation: astronaut 5s linear infinite;
134}
135
136.schoolbag {
137  width: 100px;
138  height: 150px;
139  position: absolute;
140  z-index: 1;
141  top: calc(50% - 75px);
142  left: calc(50% - 50px);
143  background-color: #94b7ca;
144  border-radius: 50px 50px 0 0 / 30px 30px 0 0;
145}
146
147.head {
148  width: 97px;
149  height: 80px;
150  position: absolute;
151  z-index: 3;
152  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
153  border-radius: 50%;
154  top: 34px;
155  left: calc(50% - 47.5px);
156}
157
158.head:after {
159  content: "";
160  width: 60px;
161  height: 50px;
162  position: absolute;
163  top: calc(50% - 25px);
164  left: calc(50% - 30px);
165  background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%);
166  border-radius: 15px;
167}
168
169.head:before {
170  content: "";
171  width: 12px;
172  height: 25px;
173  position: absolute;
174  top: calc(50% - 12.5px);
175  left: -4px;
176  background-color: #618095;
177  border-radius: 5px;
178  box-shadow: 92px 0px 0px #618095;
179}
180
181.body {
182  width: 85px;
183  height: 100px;
184  position: absolute;
185  z-index: 2;
186  background-color: #fffbff;
187  border-radius: 40px / 20px;
188  top: 105px;
189  left: calc(50% - 41px);
190  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
191}
192
193.panel {
194  width: 60px;
195  height: 40px;
196  position: absolute;
197  top: 20px;
198  left: calc(50% - 30px);
199  background-color: #b7cceb;
200}
201
202.panel:before {
203  content: "";
204  width: 30px;
205  height: 5px;
206  position: absolute;
207  top: 9px;
208  left: 7px;
209  background-color: #fbfdfa;
210  box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa;
211}
212
213.panel:after {
214  content: "";
215  width: 8px;
216  height: 8px;
217  position: absolute;
218  top: 9px;
219  right: 7px;
220  background-color: #fbfdfa;
221  border-radius: 50%;
222  box-shadow: 0px 14px 0px 2px #fbfdfa;
223}
224
225.arm {
226  width: 80px;
227  height: 30px;
228  position: absolute;
229  top: 121px;
230  z-index: 2;
231}
232
233.arm-left {
234  left: 30px;
235  background-color: #e3e8eb;
236  border-radius: 0 0 0 39px;
237}
238
239.arm-right {
240  right: 30px;
241  background-color: #fbfdfa;
242  border-radius: 0 0 39px 0;
243}
244
245.arm-left:before,
246.arm-right:before {
247  content: "";
248  width: 30px;
249  height: 70px;
250  position: absolute;
251  top: -40px;
252}
253
254.arm-left:before {
255  border-radius: 50px 50px 0px 120px / 50px 50px 0 110px;
256  left: 0;
257  background-color: #e3e8eb;
258}
259
260.arm-right:before {
261  border-radius: 50px 50px 120px 0 / 50px 50px 110px 0;
262  right: 0;
263  background-color: #fbfdfa;
264}
265
266.arm-left:after,
267.arm-right:after {
268  content: "";
269  width: 30px;
270  height: 10px;
271  position: absolute;
272  top: -24px;
273}
274
275.arm-left:after {
276  background-color: #6e91a4;
277  left: 0;
278}
279
280.arm-right:after {
281  right: 0;
282  background-color: #b6d2e0;
283}
284
285.leg {
286  width: 30px;
287  height: 40px;
288  position: absolute;
289  z-index: 2;
290  bottom: 70px;
291}
292
293.leg-left {
294  left: 76px;
295  background-color: #e3e8eb;
296  transform: rotate(20deg);
297}
298
299.leg-right {
300  right: 73px;
301  background-color: #fbfdfa;
302  transform: rotate(-20deg);
303}
304
305.leg-left:before,
306.leg-right:before {
307  content: "";
308  width: 50px;
309  height: 25px;
310  position: absolute;
311  bottom: -26px;
312}
313
314.leg-left:before {
315  left: -20px;
316  background-color: #e3e8eb;
317  border-radius: 30px 0 0 0;
318  border-bottom: 10px solid #6d96ac;
319}
320
321.leg-right:before {
322  right: -20px;
323  background-color: #fbfdfa;
324  border-radius: 0 30px 0 0;
325  border-bottom: 10px solid #b0cfe4;
326}

@keyframes snow {
  0% {
    opacity: 0;
    transform: translateY(0px);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(650px);
  }
}

@keyframes astronaut {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.box-of-star1,
.box-of-star2,
.box-of-star3,
.box-of-star4 {
  width: 100%;
  position: absolute;
  z-index: 10;
  left: 0;
  transform: translateY(650px);
  height: 700px;
}

.box-of-star1 {
  animation: snow 5s linear infinite;
}

.box-of-star2 {
  animation: snow 5s -1.64s linear infinite;
}

.box-of-star3 {
  animation: snow 5s -2.30s linear infinite;
}

.box-of-star4 {
  animation: snow 5s -3.30s linear infinite;
}

.star {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  z-index: 10;
  opacity: 0.7;
}

.star:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  z-index: 10;
  top: 80px;
  left: 70px;
  opacity: .7;
}

.star:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FFF;
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 170px;
  opacity: .9;
}

.star-position1 {
  top: 30px;
  left: 20px;
}

.star-position2 {
  top: 110px;
  left: 250px;
}

.star-position3 {
  top: 60px;
  left: 570px;
}

.star-position4 {
  top: 120px;
  left: 900px;
}

.star-position5 {
  top: 20px;
  left: 1120px;
}

.star-position6 {
  top: 90px;
  left: 1280px;
}

.star-position7 {
  top: 30px;
  left: 1480px;
}

.astronaut {
  width: 250px;
  height: 300px;
  position: absolute;
  z-index: 11;
  top: calc(50% - 150px);
  left: calc(50% - 125px);
  animation: astronaut 5s linear infinite;
}

.schoolbag {
  width: 100px;
  height: 150px;
  position: absolute;
  z-index: 1;
  top: calc(50% - 75px);
  left: calc(50% - 50px);
  background-color: #94b7ca;
  border-radius: 50px 50px 0 0 / 30px 30px 0 0;
}

.head {
  width: 97px;
  height: 80px;
  position: absolute;
  z-index: 3;
  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
  border-radius: 50%;
  top: 34px;
  left: calc(50% - 47.5px);
}

.head:after {
  content: "";
  width: 60px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 30px);
  background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%);
  border-radius: 15px;
}

.head:before {
  content: "";
  width: 12px;
  height: 25px;
  position: absolute;
  top: calc(50% - 12.5px);
  left: -4px;
  background-color: #618095;
  border-radius: 5px;
  box-shadow: 92px 0px 0px #618095;
}

.body {
  width: 85px;
  height: 100px;
  position: absolute;
  z-index: 2;
  background-color: #fffbff;
  border-radius: 40px / 20px;
  top: 105px;
  left: calc(50% - 41px);
  background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%);
}

.panel {
  width: 60px;
  height: 40px;
  position: absolute;
  top: 20px;
  left: calc(50% - 30px);
  background-color: #b7cceb;
}

.panel:before {
  content: "";
  width: 30px;
  height: 5px;
  position: absolute;
  top: 9px;
  left: 7px;
  background-color: #fbfdfa;
  box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa;
}

.panel:after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 9px;
  right: 7px;
  background-color: #fbfdfa;
  border-radius: 50%;
  box-shadow: 0px 14px 0px 2px #fbfdfa;
}

.arm {
  width: 80px;
  height: 30px;
  position: absolute;
  top: 121px;
  z-index: 2;
}

.arm-left {
  left: 30px;
  background-color: #e3e8eb;
  border-radius: 0 0 0 39px;
}

.arm-right {
  right: 30px;
  background-color: #fbfdfa;
  border-radius: 0 0 39px 0;
}

.arm-left:before,
.arm-right:before {
  content: "";
  width: 30px;
  height: 70px;
  position: absolute;
  top: -40px;
}

.arm-left:before {
  border-radius: 50px 50px 0px 120px / 50px 50px 0 110px;
  left: 0;
  background-color: #e3e8eb;
}

.arm-right:before {
  border-radius: 50px 50px 120px 0 / 50px 50px 110px 0;
  right: 0;
  background-color: #fbfdfa;
}

.arm-left:after,
.arm-right:after {
  content: "";
  width: 30px;
  height: 10px;
  position: absolute;
  top: -24px;
}

.arm-left:after {
  background-color: #6e91a4;
  left: 0;
}

.arm-right:after {
  right: 0;
  background-color: #b6d2e0;
}

.leg {
  width: 30px;
  height: 40px;
  position: absolute;
  z-index: 2;
  bottom: 70px;
}

.leg-left {
  left: 76px;
  background-color: #e3e8eb;
  transform: rotate(20deg);
}

.leg-right {
  right: 73px;
  background-color: #fbfdfa;
  transform: rotate(-20deg);
}

.leg-left:before,
.leg-right:before {
  content: "";
  width: 50px;
  height: 25px;
  position: absolute;
  bottom: -26px;
}

.leg-left:before {
  left: -20px;
  background-color: #e3e8eb;
  border-radius: 30px 0 0 0;
  border-bottom: 10px solid #6d96ac;
}

.leg-right:before {
  right: -20px;
  background-color: #fbfdfa;
  border-radius: 0 30px 0 0;
  border-bottom: 10px solid #b0cfe4;
}

HTML

1<div class="box-of-star1">
2    <div class="star star-position1"></div>
3    <div class="star star-position2"></div>
4    <div class="star star-position3"></div>
5    <div class="star star-position4"></div>
6    <div class="star star-position5"></div>
7    <div class="star star-position6"></div>
8    <div class="star star-position7"></div>
9  </div>
10  <div class="box-of-star2">
11    <div class="star star-position1"></div>
12    <div class="star star-position2"></div>
13    <div class="star star-position3"></div>
14    <div class="star star-position4"></div>
15    <div class="star star-position5"></div>
16    <div class="star star-position6"></div>
17    <div class="star star-position7"></div>
18  </div>
19  <div class="box-of-star3">
20    <div class="star star-position1"></div>
21    <div class="star star-position2"></div>
22    <div class="star star-position3"></div>
23    <div class="star star-position4"></div>
24    <div class="star star-position5"></div>
25    <div class="star star-position6"></div>
26    <div class="star star-position7"></div>
27  </div>
28  <div class="box-of-star4">
29    <div class="star star-position1"></div>
30    <div class="star star-position2"></div>
31    <div class="star star-position3"></div>
32    <div class="star star-position4"></div>
33    <div class="star star-position5"></div>
34    <div class="star star-position6"></div>
35    <div class="star star-position7"></div>
36  </div>
37  <div class="astronaut" data-js="astro">
38    <div class="head"></div>
39    <div class="arm arm-left"></div>
40    <div class="arm arm-right"></div>
41    <div class="body">
42      <div class="panel"></div>
43    </div>
44    <div class="leg leg-left"></div>
45    <div class="leg leg-right"></div>
46    <div class="schoolbag"></div>
47  </div>

<div class="box-of-star1">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div class="box-of-star2">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div class="box-of-star3">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div class="box-of-star4">
    <div class="star star-position1"></div>
    <div class="star star-position2"></div>
    <div class="star star-position3"></div>
    <div class="star star-position4"></div>
    <div class="star star-position5"></div>
    <div class="star star-position6"></div>
    <div class="star star-position7"></div>
  </div>
  <div class="astronaut" data-js="astro">
    <div class="head"></div>
    <div class="arm arm-left"></div>
    <div class="arm arm-right"></div>
    <div class="body">
      <div class="panel"></div>
    </div>
    <div class="leg leg-left"></div>
    <div class="leg leg-right"></div>
    <div class="schoolbag"></div>
  </div>