#212121
1.rocket { 2 position: absolute; 3 top: 20%; 4 width: 80px; 5 left: calc(50% - 40px); 6} 7 8.rocket .rocket-body { 9 width: 80px; 10 left: calc(50% - 50px); 11 animation: bounce 0.5s infinite; 12} 13 14.rocket .rocket-body .body { 15 background-color: #dadada; 16 height: 180px; 17 left: calc(50% - 50px); 18 border-top-right-radius: 100%; 19 border-top-left-radius: 100%; 20 border-bottom-left-radius: 50%; 21 border-bottom-right-radius: 50%; 22 border-top: 5px solid #f5f5f5; 23} 24 25.rocket .rocket-body:before { 26 content: ''; 27 position: absolute; 28 left: calc(50% - 24px); 29 width: 48px; 30 height: 13px; 31 background-color: #554842; 32 bottom: -13px; 33 border-bottom-right-radius: 60%; 34 border-bottom-left-radius: 60%; 35} 36 37.rocket .window { 38 position: absolute; 39 width: 40px; 40 height: 40px; 41 border-radius: 100%; 42 background-color: #a75248; 43 left: calc(50% - 25px); 44 top: 40px; 45 border: 5px solid #b4b2b2; 46} 47 48.rocket .fin { 49 position: absolute; 50 z-index: -100; 51 height: 55px; 52 width: 50px; 53 background-color: #a75248; 54} 55 56.rocket .fin-left { 57 left: -30px; 58 top: calc(100% - 55px); 59 border-top-left-radius: 80%; 60 border-bottom-left-radius: 20%; 61} 62 63.rocket .fin-right { 64 right: -30px; 65 top: calc(100% - 55px); 66 border-top-right-radius: 80%; 67 border-bottom-right-radius: 20%; 68} 69 70.rocket .exhaust-flame { 71 position: absolute; 72 top: 90%; 73 width: 28px; 74 background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%); 75 height: 150px; 76 left: calc(50% - 14px); 77 animation: exhaust 0.2s infinite; 78} 79 80.rocket .exhaust-fumes li { 81 width: 60px; 82 height: 60px; 83 background-color: #f5f5f5; 84 list-style: none; 85 position: absolute; 86 border-radius: 100%; 87} 88 89.rocket .exhaust-fumes li:first-child { 90 width: 200px; 91 height: 200px; 92 bottom: -300px; 93 animation: fumes 5s infinite; 94} 95 96.rocket .exhaust-fumes li:nth-child(2) { 97 width: 150px; 98 height: 150px; 99 left: -120px; 100 top: 260px; 101 animation: fumes 3.2s infinite; 102} 103 104.rocket .exhaust-fumes li:nth-child(3) { 105 width: 120px; 106 height: 120px; 107 left: -40px; 108 top: 330px; 109 animation: fumes 3s 1s infinite; 110} 111 112.rocket .exhaust-fumes li:nth-child(4) { 113 width: 100px; 114 height: 100px; 115 left: -170px; 116 animation: fumes 4s 2s infinite; 117 top: 380px; 118} 119 120.rocket .exhaust-fumes li:nth-child(5) { 121 width: 130px; 122 height: 130px; 123 left: -120px; 124 top: 350px; 125 animation: fumes 5s infinite; 126} 127 128.rocket .exhaust-fumes li:nth-child(6) { 129 width: 200px; 130 height: 200px; 131 left: -60px; 132 top: 280px; 133 animation: fumes2 10s infinite; 134} 135 136.rocket .exhaust-fumes li:nth-child(7) { 137 width: 100px; 138 height: 100px; 139 left: -100px; 140 top: 320px; 141} 142 143.rocket .exhaust-fumes li:nth-child(8) { 144 width: 110px; 145 height: 110px; 146 left: 70px; 147 top: 340px; 148} 149 150.rocket .exhaust-fumes li:nth-child(9) { 151 width: 90px; 152 height: 90px; 153 left: 200px; 154 top: 380px; 155 animation: fumes 20s infinite; 156} 157 158.star li { 159 list-style: none; 160 position: absolute; 161} 162 163.star li:before, .star li:after { 164 content: ''; 165 position: absolute; 166 background-color: #f5f5f5; 167} 168 169.star li:before { 170 width: 10px; 171 height: 2px; 172 border-radius: 50%; 173} 174 175.star li:after { 176 height: 8px; 177 width: 2px; 178 left: 4px; 179 top: -3px; 180} 181 182.star li:first-child { 183 top: -30px; 184 left: -210px; 185 animation: twinkle 0.4s infinite; 186} 187 188.star li:nth-child(2) { 189 top: 0; 190 left: 60px; 191 animation: twinkle 0.5s infinite; 192} 193 194.star li:nth-child(2):before { 195 height: 1px; 196 width: 5px; 197} 198 199.star li:nth-child(2):after { 200 width: 1px; 201 height: 5px; 202 top: -2px; 203 left: 2px; 204} 205 206.star li:nth-child(3) { 207 left: 120px; 208 top: 220px; 209 animation: twinkle 1s infinite; 210} 211 212.star li:nth-child(4) { 213 left: -100px; 214 top: 200px; 215 animation: twinkle 0.5s ease infinite; 216} 217 218.star li:nth-child(5) { 219 left: 170px; 220 top: 100px; 221 animation: twinkle 0.4s ease infinite; 222} 223 224.star li:nth-child(6) { 225 top: 87px; 226 left: -79px; 227 animation: twinkle 0.2s infinite; 228} 229 230.star li:nth-child(6):before { 231 height: 1px; 232 width: 5px; 233} 234 235.star li:nth-child(6):after { 236 width: 1px; 237 height: 5px; 238 top: -2px; 239 left: 2px; 240} 241 242@keyframes fumes { 243 50% { 244 transform: scale(1.5); 245 background-color: transparent; 246 } 247 248 51% { 249 transform: scale(0.8); 250 } 251 252 100% { 253 background-color: #f5f5f5; 254 transform: scale(1); 255 } 256} 257 258@keyframes bounce { 259 0% { 260 transform: translate3d(0px, 0px, 0); 261 } 262 263 50% { 264 transform: translate3d(0px, -4px, 0); 265 } 266 267 100% { 268 transform: translate3d(0px, 0px, 0); 269 } 270} 271 272@keyframes exhaust { 273 0% { 274 background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%); 275 } 276 277 50% { 278 background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%); 279 } 280 281 75% { 282 background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%); 283 } 284} 285 286@keyframes fumes2 { 287 50% { 288 transform: scale(1.1); 289 } 290} 291 292@keyframes twinkle { 293 80% { 294 transform: scale(1.1); 295 opacity: 0.7; 296 } 297} 298
Comments
MIT License