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