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}
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>