├── README.md ├── index.html ├── license.txt └── css └── style.css /README.md: -------------------------------------------------------------------------------- 1 | CSS animated weather icons 2 | ======= 3 | 4 | View here: http://deiu.github.io/weather-icons/ 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Weather 7 | 8 | 9 | 10 | 11 |

Pure CSS One Div Weather Animated Icons

12 | 13 |

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 | 23 | 24 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* SUNNY */ 2 | .sunny { 3 | -webkit-animation: sunny 15s linear infinite; 4 | animation: sunny 15s linear infinite; 5 | background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,0.8)), to(rgba(255,255,255,0))); 6 | background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 7 | background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 8 | height: 140px; 9 | width: 20px; 10 | margin-left: -15px; 11 | position: absolute; 12 | left: 90px; 13 | top: 20px; 14 | } 15 | .sunny:before { 16 | background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,0.8)), to(rgba(255,255,255,0))); 17 | background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 18 | background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 19 | content: ''; 20 | height: 140px; 21 | width: 20px; 22 | opacity: 1; 23 | position: absolute; 24 | bottom: 0px; 25 | left: 0px; 26 | -webkit-transform: rotate(90deg); 27 | -ms-transform: rotate(90deg); 28 | transform: rotate(90deg); 29 | } 30 | .sunny:after { 31 | background: #FFEE44; 32 | border-radius: 50%; 33 | -webkit-box-shadow: rgba(255,255,0,0.2) 0 0 0 15px; 34 | box-shadow: rgba(255,255,0,0.2) 0 0 0 15px; 35 | content: ''; 36 | height: 80px; 37 | width: 80px; 38 | position: absolute; 39 | left: -30px; 40 | top: 30px; 41 | } 42 | @-webkit-keyframes sunny { 43 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 44 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 45 | } 46 | @keyframes sunny { 47 | 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 48 | 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 49 | } 50 | 51 | /* CLOUDY */ 52 | .cloudy { 53 | -webkit-animation: cloudy 5s ease-in-out infinite; 54 | animation: cloudy 5s ease-in-out infinite; 55 | background: #FFFFFF; 56 | border-radius: 50%; 57 | -webkit-box-shadow: 58 | #FFFFFF 65px -15px 0 -5px, 59 | #FFFFFF 25px -25px, 60 | #FFFFFF 30px 10px, 61 | #FFFFFF 60px 15px 0 -10px, 62 | #FFFFFF 85px 5px 0 -5px; 63 | box-shadow: 64 | #FFFFFF 65px -15px 0 -5px, 65 | #FFFFFF 25px -25px, 66 | #FFFFFF 30px 10px, 67 | #FFFFFF 60px 15px 0 -10px, 68 | #FFFFFF 85px 5px 0 -5px; 69 | height: 50px; 70 | width: 50px; 71 | margin-left: -60px; 72 | position: absolute; 73 | left: 255px; 74 | top: 70px; 75 | } 76 | .cloudy:after { 77 | -webkit-animation: cloudy_shadow 5s ease-in-out infinite; 78 | animation: cloudy_shadow 5s ease-in-out infinite; 79 | background: #000000; 80 | border-radius: 50%; 81 | content: ''; 82 | height: 15px; 83 | width: 120px; 84 | opacity: 0.2; 85 | position: absolute; 86 | left: 5px; 87 | bottom: -60px; 88 | -webkit-transform: scale(.7); 89 | -ms-transform: scale(.7); 90 | transform: scale(.7); 91 | } 92 | @-webkit-keyframes cloudy { 93 | 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 94 | } 95 | @keyframes cloudy { 96 | 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 97 | } 98 | @-webkit-keyframes cloudy_shadow { 99 | 50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity:.05; } 100 | } 101 | @keyframes cloudy_shadow { 102 | 50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity:.05; } 103 | } 104 | 105 | /* RAINY */ 106 | .rainy { 107 | -webkit-animation: rainy 5s ease-in-out infinite 1s; 108 | animation: rainy 5s ease-in-out infinite 1s; 109 | background: #CCCCCC; 110 | border-radius: 50%; 111 | -webkit-box-shadow: 112 | #CCCCCC 65px -15px 0 -5px, 113 | #CCCCCC 25px -25px, 114 | #CCCCCC 30px 10px, 115 | #CCCCCC 60px 15px 0 -10px, 116 | #CCCCCC 85px 5px 0 -5px; 117 | box-shadow: 118 | #CCCCCC 65px -15px 0 -5px, 119 | #CCCCCC 25px -25px, 120 | #CCCCCC 30px 10px, 121 | #CCCCCC 60px 15px 0 -10px, 122 | #CCCCCC 85px 5px 0 -5px; 123 | display: block; 124 | height: 50px; 125 | width: 50px; 126 | margin-left: -60px; 127 | position: absolute; 128 | left: 427px; 129 | top: 70px; 130 | } 131 | .rainy:after { 132 | -webkit-animation: rainy_shadow 5s ease-in-out infinite 1s; 133 | animation: rainy_shadow 5s ease-in-out infinite 1s; 134 | background: #000000; 135 | border-radius: 50%; 136 | content: ''; 137 | height: 15px; 138 | width: 120px; 139 | opacity: 0.2; 140 | position: absolute; 141 | left: 5px; 142 | bottom: -60px; 143 | -webkit-transform: scale(.7); 144 | -ms-transform: scale(.7); 145 | transform: scale(.7); 146 | } 147 | .rainy:before { 148 | -webkit-animation: rainy_rain .7s infinite linear; 149 | animation: rainy_rain .7s infinite linear; 150 | content: ''; 151 | background: #CCCCCC; 152 | border-radius: 50%; 153 | display: block; 154 | height: 6px; 155 | width: 3px; 156 | opacity: 0.3; 157 | -webkit-transform: scale(.9); 158 | -ms-transform: scale(.9); 159 | transform: scale(.9); 160 | } 161 | @-webkit-keyframes rainy { 162 | 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 163 | } 164 | @keyframes rainy { 165 | 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 166 | } 167 | @-webkit-keyframes rainy_shadow { 168 | 50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; } 169 | } 170 | @keyframes rainy_shadow { 171 | 50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; } 172 | } 173 | @-webkit-keyframes rainy_rain { 174 | 0% { 175 | -webkit-box-shadow: 176 | rgba(0,0,0,0) 30px 30px, 177 | rgba(0,0,0,0) 40px 40px, 178 | #000 50px 75px, 179 | #000 55px 50px, 180 | #000 70px 100px, 181 | #000 80px 95px, 182 | #000 110px 45px, 183 | #000 90px 35px; 184 | box-shadow: 185 | rgba(0,0,0,0) 30px 30px, 186 | rgba(0,0,0,0) 40px 40px, 187 | #000 50px 75px, 188 | #000 55px 50px, 189 | #000 70px 100px, 190 | #000 80px 95px, 191 | #000 110px 45px, 192 | #000 90px 35px; 193 | } 194 | 25% { 195 | -webkit-box-shadow: 196 | #000 30px 45px, 197 | #000 40px 60px, 198 | #000 50px 90px, 199 | #000 55px 65px, 200 | rgba(0,0,0,0) 70px 120px, 201 | rgba(0,0,0,0) 80px 120px, 202 | #000 110px 70px, 203 | #000 90px 60px; 204 | box-shadow: 205 | #000 30px 45px, 206 | #000 40px 60px, 207 | #000 50px 90px, 208 | #000 55px 65px, 209 | rgba(0,0,0,0) 70px 120px, 210 | rgba(0,0,0,0) 80px 120px, 211 | #000 110px 70px, 212 | #000 90px 60px; 213 | } 214 | 26% { 215 | -webkit-box-shadow: 216 | #000 30px 45px, 217 | #000 40px 60px, 218 | #000 50px 90px, 219 | #000 55px 65px, 220 | rgba(0,0,0,0) 70px 40px, 221 | rgba(0,0,0,0) 80px 20px, 222 | #000 110px 70px, 223 | #000 90px 60px; 224 | box-shadow: 225 | #000 30px 45px, 226 | #000 40px 60px, 227 | #000 50px 90px, 228 | #000 55px 65px, 229 | rgba(0,0,0,0) 70px 40px, 230 | rgba(0,0,0,0) 80px 20px, 231 | #000 110px 70px, 232 | #000 90px 60px; 233 | } 234 | 50% { 235 | -webkit-box-shadow: 236 | #000 30px 70px, 237 | #000 40px 80px, 238 | rgba(0,0,0,0) 50px 100px, 239 | #000 55px 80px, 240 | #000 70px 60px, 241 | #000 80px 45px, 242 | #000 110px 95px, 243 | #000 90px 85px; 244 | box-shadow: 245 | #000 30px 70px, 246 | #000 40px 80px, 247 | rgba(0,0,0,0) 50px 100px, 248 | #000 55px 80px, 249 | #000 70px 60px, 250 | #000 80px 45px, 251 | #000 110px 95px, 252 | #000 90px 85px; 253 | } 254 | 51% { 255 | -webkit-box-shadow: 256 | #000 30px 70px, 257 | #000 40px 80px, 258 | rgba(0,0,0,0) 50px 45px, 259 | #000 55px 80px, 260 | #000 70px 60px, 261 | #000 80px 45px, 262 | #000 110px 95px, 263 | #000 90px 85px; 264 | box-shadow: 265 | #000 30px 70px, 266 | #000 40px 80px, 267 | rgba(0,0,0,0) 50px 45px, 268 | #000 55px 80px, 269 | #000 70px 60px, 270 | #000 80px 45px, 271 | #000 110px 95px, 272 | #000 90px 85px; 273 | } 274 | 75% { 275 | -webkit-box-shadow: 276 | #000 30px 95px, 277 | #000 40px 100px, 278 | #000 50px 60px, 279 | rgba(0,0,0,0) 55px 95px, 280 | #000 70px 80px, 281 | #000 80px 70px, 282 | rgba(0,0,0,0) 110px 120px, 283 | rgba(0,0,0,0) 90px 110px; 284 | box-shadow: 285 | #000 30px 95px, 286 | #000 40px 100px, 287 | #000 50px 60px, 288 | rgba(0,0,0,0) 55px 95px, 289 | #000 70px 80px, 290 | #000 80px 70px, 291 | rgba(0,0,0,0) 110px 120px, 292 | rgba(0,0,0,0) 90px 110px; 293 | } 294 | 76% { 295 | -webkit-box-shadow: 296 | #000 30px 95px, 297 | #000 40px 100px, 298 | #000 50px 60px, 299 | rgba(0,0,0,0) 55px 35px, 300 | #000 70px 80px, 301 | #000 80px 70px, 302 | rgba(0,0,0,0) 110px 25px, 303 | rgba(0,0,0,0) 90px 15px; 304 | box-shadow: 305 | #000 30px 95px, 306 | #000 40px 100px, 307 | #000 50px 60px, 308 | rgba(0,0,0,0) 55px 35px, 309 | #000 70px 80px, 310 | #000 80px 70px, 311 | rgba(0,0,0,0) 110px 25px, 312 | rgba(0,0,0,0) 90px 15px; 313 | } 314 | 100% { 315 | -webkit-box-shadow: 316 | rgba(0,0,0,0) 30px 120px, 317 | rgba(0,0,0,0) 40px 120px, 318 | #000 50px 75px, 319 | #000 55px 50px, 320 | #000 70px 100px, 321 | #000 80px 95px, 322 | #000 110px 45px, 323 | #000 90px 35px; 324 | box-shadow: 325 | rgba(0,0,0,0) 30px 120px, 326 | rgba(0,0,0,0) 40px 120px, 327 | #000 50px 75px, 328 | #000 55px 50px, 329 | #000 70px 100px, 330 | #000 80px 95px, 331 | #000 110px 45px, 332 | #000 90px 35px; 333 | } 334 | } 335 | @keyframes rainy_rain { 336 | 0% { 337 | -webkit-box-shadow: 338 | rgba(0,0,0,0) 30px 30px, 339 | rgba(0,0,0,0) 40px 40px, 340 | #000 50px 75px, 341 | #000 55px 50px, 342 | #000 70px 100px, 343 | #000 80px 95px, 344 | #000 110px 45px, 345 | #000 90px 35px; 346 | box-shadow: 347 | rgba(0,0,0,0) 30px 30px, 348 | rgba(0,0,0,0) 40px 40px, 349 | #000 50px 75px, 350 | #000 55px 50px, 351 | #000 70px 100px, 352 | #000 80px 95px, 353 | #000 110px 45px, 354 | #000 90px 35px; 355 | } 356 | 25% { 357 | -webkit-box-shadow: 358 | #000 30px 45px, 359 | #000 40px 60px, 360 | #000 50px 90px, 361 | #000 55px 65px, 362 | rgba(0,0,0,0) 70px 120px, 363 | rgba(0,0,0,0) 80px 120px, 364 | #000 110px 70px, 365 | #000 90px 60px; 366 | box-shadow: 367 | #000 30px 45px, 368 | #000 40px 60px, 369 | #000 50px 90px, 370 | #000 55px 65px, 371 | rgba(0,0,0,0) 70px 120px, 372 | rgba(0,0,0,0) 80px 120px, 373 | #000 110px 70px, 374 | #000 90px 60px; 375 | } 376 | 26% { 377 | -webkit-box-shadow: 378 | #000 30px 45px, 379 | #000 40px 60px, 380 | #000 50px 90px, 381 | #000 55px 65px, 382 | rgba(0,0,0,0) 70px 40px, 383 | rgba(0,0,0,0) 80px 20px, 384 | #000 110px 70px, 385 | #000 90px 60px; 386 | box-shadow: 387 | #000 30px 45px, 388 | #000 40px 60px, 389 | #000 50px 90px, 390 | #000 55px 65px, 391 | rgba(0,0,0,0) 70px 40px, 392 | rgba(0,0,0,0) 80px 20px, 393 | #000 110px 70px, 394 | #000 90px 60px; 395 | } 396 | 50% { 397 | -webkit-box-shadow: 398 | #000 30px 70px, 399 | #000 40px 80px, 400 | rgba(0,0,0,0) 50px 100px, 401 | #000 55px 80px, 402 | #000 70px 60px, 403 | #000 80px 45px, 404 | #000 110px 95px, 405 | #000 90px 85px; 406 | box-shadow: 407 | #000 30px 70px, 408 | #000 40px 80px, 409 | rgba(0,0,0,0) 50px 100px, 410 | #000 55px 80px, 411 | #000 70px 60px, 412 | #000 80px 45px, 413 | #000 110px 95px, 414 | #000 90px 85px; 415 | } 416 | 51% { 417 | -webkit-box-shadow: 418 | #000 30px 70px, 419 | #000 40px 80px, 420 | rgba(0,0,0,0) 50px 45px, 421 | #000 55px 80px, 422 | #000 70px 60px, 423 | #000 80px 45px, 424 | #000 110px 95px, 425 | #000 90px 85px; 426 | box-shadow: 427 | #000 30px 70px, 428 | #000 40px 80px, 429 | rgba(0,0,0,0) 50px 45px, 430 | #000 55px 80px, 431 | #000 70px 60px, 432 | #000 80px 45px, 433 | #000 110px 95px, 434 | #000 90px 85px; 435 | } 436 | 75% { 437 | -webkit-box-shadow: 438 | #000 30px 95px, 439 | #000 40px 100px, 440 | #000 50px 60px, 441 | rgba(0,0,0,0) 55px 95px, 442 | #000 70px 80px, 443 | #000 80px 70px, 444 | rgba(0,0,0,0) 110px 120px, 445 | rgba(0,0,0,0) 90px 110px; 446 | box-shadow: 447 | #000 30px 95px, 448 | #000 40px 100px, 449 | #000 50px 60px, 450 | rgba(0,0,0,0) 55px 95px, 451 | #000 70px 80px, 452 | #000 80px 70px, 453 | rgba(0,0,0,0) 110px 120px, 454 | rgba(0,0,0,0) 90px 110px; 455 | } 456 | 76% { 457 | -webkit-box-shadow: 458 | #000 30px 95px, 459 | #000 40px 100px, 460 | #000 50px 60px, 461 | rgba(0,0,0,0) 55px 35px, 462 | #000 70px 80px, 463 | #000 80px 70px, 464 | rgba(0,0,0,0) 110px 25px, 465 | rgba(0,0,0,0) 90px 15px; 466 | box-shadow: 467 | #000 30px 95px, 468 | #000 40px 100px, 469 | #000 50px 60px, 470 | rgba(0,0,0,0) 55px 35px, 471 | #000 70px 80px, 472 | #000 80px 70px, 473 | rgba(0,0,0,0) 110px 25px, 474 | rgba(0,0,0,0) 90px 15px; 475 | } 476 | 100% { 477 | -webkit-box-shadow: 478 | rgba(0,0,0,0) 30px 120px, 479 | rgba(0,0,0,0) 40px 120px, 480 | #000 50px 75px, 481 | #000 55px 50px, 482 | #000 70px 100px, 483 | #000 80px 95px, 484 | #000 110px 45px, 485 | #000 90px 35px; 486 | box-shadow: 487 | rgba(0,0,0,0) 30px 120px, 488 | rgba(0,0,0,0) 40px 120px, 489 | #000 50px 75px, 490 | #000 55px 50px, 491 | #000 70px 100px, 492 | #000 80px 95px, 493 | #000 110px 45px, 494 | #000 90px 35px; 495 | } 496 | } 497 | 498 | /* RAINBOW */ 499 | .rainbow { 500 | -webkit-animation: rainbow 5s ease-in-out infinite; 501 | animation: rainbow 5s ease-in-out infinite; 502 | border-radius: 170px 0 0 0; 503 | -webkit-box-shadow: 504 | #FB323C -2px -2px 0 1px, 505 | #F99716 -4px -4px 0 3px, 506 | #FEE124 -6px -6px 0 5px, 507 | #AFDF2E -8px -8px 0 7px, 508 | #6AD7F8 -10px -10px 0 9px, 509 | #60B1F5 -12px -12px 0 11px, 510 | #A3459B -14px -14px 0 13px; 511 | box-shadow: 512 | #FB323C -2px -2px 0 1px, 513 | #F99716 -4px -4px 0 3px, 514 | #FEE124 -6px -6px 0 5px, 515 | #AFDF2E -8px -8px 0 7px, 516 | #6AD7F8 -10px -10px 0 9px, 517 | #60B1F5 -12px -12px 0 11px, 518 | #A3459B -14px -14px 0 13px; 519 | height: 70px; 520 | width: 70px; 521 | margin-left: -40px; 522 | position: absolute; 523 | left: 610px; 524 | top: 71px; 525 | -webkit-transform: rotate(40deg); 526 | -ms-transform: rotate(40deg); 527 | transform: rotate(40deg); 528 | } 529 | .rainbow:after { 530 | -webkit-animation: rainbow_shadow 5s ease-in-out infinite; 531 | animation: rainbow_shadow 5s ease-in-out infinite; 532 | background: #000000; 533 | border-radius: 50%; 534 | content: ''; 535 | opacity: 0.2; 536 | height: 15px; 537 | width: 120px; 538 | position: absolute; 539 | bottom: -23px; 540 | left: 17px; 541 | -webkit-transform: rotate(-40deg); 542 | -ms-transform: rotate(-40deg); 543 | transform: rotate(-40deg); 544 | -webkit-transform-origin: 50% 50%; 545 | -ms-transform-origin: 50% 50%; 546 | transform-origin: 50% 50%; 547 | } 548 | @-webkit-keyframes rainbow { 549 | 50% { -webkit-transform: rotate(50deg); transform: rotate(50deg); } 550 | } 551 | @keyframes rainbow { 552 | 50% { -webkit-transform: rotate(50deg); transform: rotate(50deg); } 553 | } 554 | @-webkit-keyframes rainbow_shadow { 555 | 50% { -webkit-transform: rotate(-50deg) translate(10px) scale(.7); transform: rotate(-50deg) translate(10px) scale(.7); opacity: 0.05; } 556 | } 557 | @keyframes rainbow_shadow { 558 | 50% { -webkit-transform: rotate(-50deg) translate(10px) scale(.7); transform: rotate(-50deg) translate(10px) scale(.7); opacity: 0.05; } 559 | } 560 | 561 | /* STARRY */ 562 | .starry { 563 | -webkit-animation: starry_star 5s ease-in-out infinite; 564 | animation: starry_star 5s ease-in-out infinite; 565 | background: #fff; 566 | border-radius: 50%; 567 | -webkit-box-shadow: 568 | #FFFFFF 26px 7px 0 -1px, 569 | rgba(255,255,255,0.1) -36px -19px 0 -1px, 570 | rgba(255,255,255,0.1) -51px -34px 0 -1px, 571 | #FFFFFF -52px -62px 0 -1px, 572 | #FFFFFF 14px -37px, 573 | rgba(255,255,255,0.1) 41px -19px, 574 | #FFFFFF 34px -50px, 575 | rgba(255,255,255,0.1) 14px -71px 0 -1px, 576 | #FFFFFF 64px -21px 0 -1px, 577 | rgba(255,255,255,0.1) 32px -85px 0 -1px, 578 | #FFFFFF 64px -90px, 579 | rgba(255,255,255,0.1) 60px -67px 0 -1px, 580 | #FFFFFF 34px -127px, 581 | rgba(255,255,255,0.1) -26px -103px 0 -1px; 582 | box-shadow: 583 | #FFFFFF 26px 7px 0 -1px, 584 | rgba(255,255,255,0.1) -36px -19px 0 -1px, 585 | rgba(255,255,255,0.1) -51px -34px 0 -1px, 586 | #FFFFFF -52px -62px 0 -1px, 587 | #FFFFFF 14px -37px, 588 | rgba(255,255,255,0.1) 41px -19px, 589 | #FFFFFF 34px -50px, 590 | rgba(255,255,255,0.1) 14px -71px 0 -1px, 591 | #FFFFFF 64px -21px 0 -1px, 592 | rgba(255,255,255,0.1) 32px -85px 0 -1px, 593 | #FFFFFF 64px -90px, 594 | rgba(255,255,255,0.1) 60px -67px 0 -1px, 595 | #FFFFFF 34px -127px, 596 | rgba(255,255,255,0.1) -26px -103px 0 -1px; 597 | height: 4px; 598 | width: 4px; 599 | margin-left: -10px; 600 | opacity: 1; 601 | position: absolute; 602 | left: 777px; 603 | top: 150px; 604 | } 605 | .starry:after { 606 | -webkit-animation: starry 5s ease-in-out infinite; 607 | animation: starry 5s ease-in-out infinite; 608 | border-radius: 50%; 609 | -webkit-box-shadow: #FFFFFF -25px 0; 610 | box-shadow: #FFFFFF -25px 0; 611 | content: ''; 612 | height: 100px; 613 | width: 100px; 614 | position: absolute; 615 | top: -106px; 616 | -webkit-transform: rotate(-5deg); 617 | -ms-transform: rotate(-5deg); 618 | transform: rotate(-5deg); 619 | -webkit-transform-origin: 0 50%; 620 | -ms-transform-origin: 0 50%; 621 | transform-origin: 0 50%; 622 | } 623 | 624 | @-webkit-keyframes starry { 625 | 50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 626 | } 627 | 628 | @keyframes starry { 629 | 50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 630 | } 631 | @-webkit-keyframes starry_star { 632 | 50% { 633 | -webkit-box-shadow: 634 | rgba(255,255,255,0.1) 26px 7px 0 -1px, 635 | #FFFFFF -36px -19px 0 -1px, 636 | #FFFFFF -51px -34px 0 -1px, 637 | rgba(255,255,255,0.1) -52px -62px 0 -1px, 638 | rgba(255,255,255,0.1) 14px -37px, 639 | #FFFFFF 41px -19px, 640 | rgba(255,255,255,0.1) 34px -50px, 641 | #FFFFFF 14px -71px 0 -1px, 642 | rgba(255,255,255,0.1) 64px -21px 0 -1px, 643 | #FFFFFF 32px -85px 0 -1px, 644 | rgba(255,255,255,0.1) 64px -90px, 645 | #FFFFFF 60px -67px 0 -1px, 646 | rgba(255,255,255,0.1) 34px -127px, 647 | #FFFFFF -26px -103px 0 -1px; 648 | box-shadow: 649 | rgba(255,255,255,0.1) 26px 7px 0 -1px, 650 | #FFFFFF -36px -19px 0 -1px, 651 | #FFFFFF -51px -34px 0 -1px, 652 | rgba(255,255,255,0.1) -52px -62px 0 -1px, 653 | rgba(255,255,255,0.1) 14px -37px, 654 | #FFFFFF 41px -19px, 655 | rgba(255,255,255,0.1) 34px -50px, 656 | #FFFFFF 14px -71px 0 -1px, 657 | rgba(255,255,255,0.1) 64px -21px 0 -1px, 658 | #FFFFFF 32px -85px 0 -1px, 659 | rgba(255,255,255,0.1) 64px -90px, 660 | #FFFFFF 60px -67px 0 -1px, 661 | rgba(255,255,255,0.1) 34px -127px, 662 | #FFFFFF -26px -103px 0 -1px; 663 | } 664 | } 665 | @keyframes starry_star { 666 | 50% { 667 | -webkit-box-shadow: 668 | rgba(255,255,255,0.1) 26px 7px 0 -1px, 669 | #FFFFFF -36px -19px 0 -1px, 670 | #FFFFFF -51px -34px 0 -1px, 671 | rgba(255,255,255,0.1) -52px -62px 0 -1px, 672 | rgba(255,255,255,0.1) 14px -37px, 673 | #FFFFFF 41px -19px, 674 | rgba(255,255,255,0.1) 34px -50px, 675 | #FFFFFF 14px -71px 0 -1px, 676 | rgba(255,255,255,0.1) 64px -21px 0 -1px, 677 | #FFFFFF 32px -85px 0 -1px, 678 | rgba(255,255,255,0.1) 64px -90px, 679 | #FFFFFF 60px -67px 0 -1px, 680 | rgba(255,255,255,0.1) 34px -127px, 681 | #FFFFFF -26px -103px 0 -1px; 682 | box-shadow: 683 | rgba(255,255,255,0.1) 26px 7px 0 -1px, 684 | #FFFFFF -36px -19px 0 -1px, 685 | #FFFFFF -51px -34px 0 -1px, 686 | rgba(255,255,255,0.1) -52px -62px 0 -1px, 687 | rgba(255,255,255,0.1) 14px -37px, 688 | #FFFFFF 41px -19px, 689 | rgba(255,255,255,0.1) 34px -50px, 690 | #FFFFFF 14px -71px 0 -1px, 691 | rgba(255,255,255,0.1) 64px -21px 0 -1px, 692 | #FFFFFF 32px -85px 0 -1px, 693 | rgba(255,255,255,0.1) 64px -90px, 694 | #FFFFFF 60px -67px 0 -1px, 695 | rgba(255,255,255,0.1) 34px -127px, 696 | #FFFFFF -26px -103px 0 -1px; 697 | } 698 | } 699 | 700 | /* STORMY */ 701 | .stormy { 702 | -webkit-animation: stormy 5s ease-in-out infinite; 703 | animation: stormy 5s ease-in-out infinite; 704 | background: #222222; 705 | border-radius: 50%; 706 | -webkit-box-shadow: 707 | #222222 65px -15px 0 -5px, 708 | #222222 25px -25px, 709 | #222222 30px 10px, 710 | #222222 60px 15px 0 -10px, 711 | #222222 85px 5px 0 -5px; 712 | box-shadow: 713 | #222222 65px -15px 0 -5px, 714 | #222222 25px -25px, 715 | #222222 30px 10px, 716 | #222222 60px 15px 0 -10px, 717 | #222222 85px 5px 0 -5px; 718 | height: 50px; 719 | width: 50px; 720 | margin-left: -60px; 721 | position: absolute; 722 | left: 947px; 723 | top: 70px; 724 | } 725 | .stormy:after { 726 | -webkit-animation: stormy_shadow 5s ease-in-out infinite; 727 | animation: stormy_shadow 5s ease-in-out infinite; 728 | background: #000; 729 | border-radius: 50%; 730 | content: ''; 731 | height: 15px; 732 | width: 120px; 733 | opacity: 0.2; 734 | position: absolute; 735 | left: 5px; 736 | bottom: -60px; 737 | -webkit-transform: scale(.7); 738 | -ms-transform: scale(.7); 739 | transform: scale(.7); 740 | } 741 | .stormy:before { 742 | -webkit-animation: stormy_thunder 2s steps(1, end) infinite; 743 | animation: stormy_thunder 2s steps(1, end) infinite; 744 | border-left: 0px solid transparent; 745 | border-right: 7px solid transparent; 746 | border-top: 43px solid yellow; 747 | -webkit-box-shadow: yellow -7px -32px; 748 | box-shadow: yellow -7px -32px; 749 | content: ''; 750 | display: block; 751 | height: 0; 752 | width: 0; 753 | position: absolute; 754 | left: 57px; 755 | top: 70px; 756 | -webkit-transform: rotate(14deg); 757 | -ms-transform: rotate(14deg); 758 | transform: rotate(14deg); 759 | -webkit-transform-origin: 50% -60px; 760 | -ms-transform-origin: 50% -60px; 761 | transform-origin: 50% -60px; 762 | } 763 | @-webkit-keyframes stormy { 764 | 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 765 | } 766 | @keyframes stormy { 767 | 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 768 | } 769 | @-webkit-keyframes stormy_shadow { 770 | 50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; } 771 | } 772 | @keyframes stormy_shadow { 773 | 50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; } 774 | } 775 | @-webkit-keyframes stormy_thunder { 776 | 0% { -webkit-transform: rotate(20deg); transform: rotate(20deg); opacity:1; } 777 | 5% { -webkit-transform: rotate(-34deg); transform: rotate(-34deg); opacity:1; } 778 | 10% { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity:1; } 779 | 15% { -webkit-transform: rotate(-34deg); transform: rotate(-34deg); opacity:0; } 780 | } 781 | @keyframes stormy_thunder { 782 | 0% { -webkit-transform: rotate(20deg); transform: rotate(20deg); opacity:1; } 783 | 5% { -webkit-transform: rotate(-34deg); transform: rotate(-34deg); opacity:1; } 784 | 10% { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity:1; } 785 | 15% { -webkit-transform: rotate(-34deg); transform: rotate(-34deg); opacity:0; } 786 | } 787 | 788 | /* SNOWY */ 789 | .snowy { 790 | -webkit-animation: snowy 5s ease-in-out infinite 1s; 791 | animation: snowy 5s ease-in-out infinite 1s; 792 | background: #FFFFFF; 793 | border-radius: 50%; 794 | -webkit-box-shadow: 795 | #FFFFFF 65px -15px 0 -5px, 796 | #FFFFFF 25px -25px, 797 | #FFFFFF 30px 10px, 798 | #FFFFFF 60px 15px 0 -10px, 799 | #FFFFFF 85px 5px 0 -5px; 800 | box-shadow: 801 | #FFFFFF 65px -15px 0 -5px, 802 | #FFFFFF 25px -25px, 803 | #FFFFFF 30px 10px, 804 | #FFFFFF 60px 15px 0 -10px, 805 | #FFFFFF 85px 5px 0 -5px; 806 | display: block; 807 | height: 50px; 808 | width: 50px; 809 | margin-left: -60px; 810 | position: absolute; 811 | left: 1112px; 812 | top: 70px; 813 | } 814 | .snowy:after { 815 | -webkit-animation: snowy_shadow 5s ease-in-out infinite 1s; 816 | animation: snowy_shadow 5s ease-in-out infinite 1s; 817 | background: #000000; 818 | border-radius: 50%; 819 | content: ''; 820 | height: 15px; 821 | width: 120px; 822 | opacity: 0.2; 823 | position: absolute; 824 | left: 8px; 825 | bottom: -60px; 826 | -webkit-transform: scale(.7); 827 | -ms-transform: scale(.7); 828 | transform: scale(.7); 829 | } 830 | .snowy:before { 831 | -webkit-animation: snowy_snow 2s infinite linear; 832 | animation: snowy_snow 2s infinite linear; 833 | content: ''; 834 | border-radius: 50%; 835 | display: block; 836 | height: 7px; 837 | width: 7px; 838 | opacity: 0.8; 839 | -webkit-transform: scale(.9); 840 | -ms-transform: scale(.9); 841 | transform: scale(.9); 842 | } 843 | @-webkit-keyframes snowy { 844 | 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 845 | } 846 | @keyframes snowy { 847 | 50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 848 | } 849 | @-webkit-keyframes snowy_shadow { 850 | 50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; } 851 | } 852 | @keyframes snowy_shadow { 853 | 50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; } 854 | } 855 | @-webkit-keyframes snowy_snow { 856 | 0% { 857 | -webkit-box-shadow: 858 | rgba(238,238,238,0) 30px 30px, 859 | rgba(238,238,238,0) 40px 40px, 860 | #EEEEEE 50px 75px, 861 | #EEEEEE 55px 50px, 862 | #EEEEEE 70px 100px, 863 | #EEEEEE 80px 95px, 864 | #EEEEEE 110px 45px, 865 | #EEEEEE 90px 35px; 866 | box-shadow: 867 | rgba(238,238,238,0) 30px 30px, 868 | rgba(238,238,238,0) 40px 40px, 869 | #EEEEEE 50px 75px, 870 | #EEEEEE 55px 50px, 871 | #EEEEEE 70px 100px, 872 | #EEEEEE 80px 95px, 873 | #EEEEEE 110px 45px, 874 | #EEEEEE 90px 35px; 875 | } 876 | 25% { 877 | -webkit-box-shadow: 878 | #EEEEEE 30px 45px, 879 | #EEEEEE 40px 60px, 880 | #EEEEEE 50px 90px, 881 | #EEEEEE 55px 65px, 882 | rgba(238,238,238,0) 70px 120px, 883 | rgba(238,238,238,0) 80px 120px, 884 | #EEEEEE 110px 70px, 885 | #EEEEEE 90px 60px; 886 | box-shadow: 887 | #EEEEEE 30px 45px, 888 | #EEEEEE 40px 60px, 889 | #EEEEEE 50px 90px, 890 | #EEEEEE 55px 65px, 891 | rgba(238,238,238,0) 70px 120px, 892 | rgba(238,238,238,0) 80px 120px, 893 | #EEEEEE 110px 70px, 894 | #EEEEEE 90px 60px; 895 | } 896 | 26% { 897 | -webkit-box-shadow: 898 | #EEEEEE 30px 45px, 899 | #EEEEEE 40px 60px, 900 | #EEEEEE 50px 90px, 901 | #EEEEEE 55px 65px, 902 | rgba(238,238,238,0) 70px 40px, 903 | rgba(238,238,238,0) 80px 20px, 904 | #EEEEEE 110px 70px, 905 | #EEEEEE 90px 60px; 906 | box-shadow: 907 | #EEEEEE 30px 45px, 908 | #EEEEEE 40px 60px, 909 | #EEEEEE 50px 90px, 910 | #EEEEEE 55px 65px, 911 | rgba(238,238,238,0) 70px 40px, 912 | rgba(238,238,238,0) 80px 20px, 913 | #EEEEEE 110px 70px, 914 | #EEEEEE 90px 60px; 915 | } 916 | 50% { 917 | -webkit-box-shadow: 918 | #EEEEEE 30px 70px, 919 | #EEEEEE 40px 80px, 920 | rgba(238,238,238,0) 50px 100px, 921 | #EEEEEE 55px 80px, 922 | #EEEEEE 70px 60px, 923 | #EEEEEE 80px 45px, 924 | #EEEEEE 110px 95px, 925 | #EEEEEE 90px 85px; 926 | box-shadow: 927 | #EEEEEE 30px 70px, 928 | #EEEEEE 40px 80px, 929 | rgba(238,238,238,0) 50px 100px, 930 | #EEEEEE 55px 80px, 931 | #EEEEEE 70px 60px, 932 | #EEEEEE 80px 45px, 933 | #EEEEEE 110px 95px, 934 | #EEEEEE 90px 85px; 935 | } 936 | 51% { 937 | -webkit-box-shadow: 938 | #EEEEEE 30px 70px, 939 | #EEEEEE 40px 80px, 940 | rgba(238,238,238,0) 50px 45px, 941 | #EEEEEE 55px 80px, 942 | #EEEEEE 70px 60px, 943 | #EEEEEE 80px 45px, 944 | #EEEEEE 110px 95px, 945 | #EEEEEE 90px 85px; 946 | box-shadow: 947 | #EEEEEE 30px 70px, 948 | #EEEEEE 40px 80px, 949 | rgba(238,238,238,0) 50px 45px, 950 | #EEEEEE 55px 80px, 951 | #EEEEEE 70px 60px, 952 | #EEEEEE 80px 45px, 953 | #EEEEEE 110px 95px, 954 | #EEEEEE 90px 85px; 955 | } 956 | 75% { 957 | -webkit-box-shadow: 958 | #EEEEEE 30px 95px, 959 | #EEEEEE 40px 100px, 960 | #EEEEEE 50px 60px, 961 | rgba(238,238,238,0) 55px 95px, 962 | #EEEEEE 70px 80px, 963 | #EEEEEE 80px 70px, 964 | rgba(238,238,238,0) 110px 120px, 965 | rgba(238,238,238,0) 90px 110px; 966 | box-shadow: 967 | #EEEEEE 30px 95px, 968 | #EEEEEE 40px 100px, 969 | #EEEEEE 50px 60px, 970 | rgba(238,238,238,0) 55px 95px, 971 | #EEEEEE 70px 80px, 972 | #EEEEEE 80px 70px, 973 | rgba(238,238,238,0) 110px 120px, 974 | rgba(238,238,238,0) 90px 110px; 975 | } 976 | 76% { 977 | -webkit-box-shadow: 978 | #EEEEEE 30px 95px, 979 | #EEEEEE 40px 100px, 980 | #EEEEEE 50px 60px, 981 | rgba(238,238,238,0) 55px 35px, 982 | #EEEEEE 70px 80px, 983 | #EEEEEE 80px 70px, 984 | rgba(238,238,238,0) 110px 25px, 985 | rgba(238,238,238,0) 90px 15px; 986 | box-shadow: 987 | #EEEEEE 30px 95px, 988 | #EEEEEE 40px 100px, 989 | #EEEEEE 50px 60px, 990 | rgba(238,238,238,0) 55px 35px, 991 | #EEEEEE 70px 80px, 992 | #EEEEEE 80px 70px, 993 | rgba(238,238,238,0) 110px 25px, 994 | rgba(238,238,238,0) 90px 15px; 995 | } 996 | 100% { 997 | -webkit-box-shadow: 998 | rgba(238,238,238,0) 30px 120px, 999 | rgba(238,238,238,0) 40px 120px, 1000 | #EEEEEE 50px 75px, 1001 | #EEEEEE 55px 50px, 1002 | #EEEEEE 70px 100px, 1003 | #EEEEEE 80px 95px, 1004 | #EEEEEE 110px 45px, 1005 | #EEEEEE 90px 35px; 1006 | box-shadow: 1007 | rgba(238,238,238,0) 30px 120px, 1008 | rgba(238,238,238,0) 40px 120px, 1009 | #EEEEEE 50px 75px, 1010 | #EEEEEE 55px 50px, 1011 | #EEEEEE 70px 100px, 1012 | #EEEEEE 80px 95px, 1013 | #EEEEEE 110px 45px, 1014 | #EEEEEE 90px 35px; 1015 | } 1016 | } 1017 | @keyframes snowy_snow { 1018 | 0% { 1019 | -webkit-box-shadow: 1020 | rgba(238,238,238,0) 30px 30px, 1021 | rgba(238,238,238,0) 40px 40px, 1022 | #EEEEEE 50px 75px, 1023 | #EEEEEE 55px 50px, 1024 | #EEEEEE 70px 100px, 1025 | #EEEEEE 80px 95px, 1026 | #EEEEEE 110px 45px, 1027 | #EEEEEE 90px 35px; 1028 | box-shadow: 1029 | rgba(238,238,238,0) 30px 30px, 1030 | rgba(238,238,238,0) 40px 40px, 1031 | #EEEEEE 50px 75px, 1032 | #EEEEEE 55px 50px, 1033 | #EEEEEE 70px 100px, 1034 | #EEEEEE 80px 95px, 1035 | #EEEEEE 110px 45px, 1036 | #EEEEEE 90px 35px; 1037 | } 1038 | 25% { 1039 | -webkit-box-shadow: 1040 | #EEEEEE 30px 45px, 1041 | #EEEEEE 40px 60px, 1042 | #EEEEEE 50px 90px, 1043 | #EEEEEE 55px 65px, 1044 | rgba(238,238,238,0) 70px 120px, 1045 | rgba(238,238,238,0) 80px 120px, 1046 | #EEEEEE 110px 70px, 1047 | #EEEEEE 90px 60px; 1048 | box-shadow: 1049 | #EEEEEE 30px 45px, 1050 | #EEEEEE 40px 60px, 1051 | #EEEEEE 50px 90px, 1052 | #EEEEEE 55px 65px, 1053 | rgba(238,238,238,0) 70px 120px, 1054 | rgba(238,238,238,0) 80px 120px, 1055 | #EEEEEE 110px 70px, 1056 | #EEEEEE 90px 60px; 1057 | } 1058 | 26% { 1059 | -webkit-box-shadow: 1060 | #EEEEEE 30px 45px, 1061 | #EEEEEE 40px 60px, 1062 | #EEEEEE 50px 90px, 1063 | #EEEEEE 55px 65px, 1064 | rgba(238,238,238,0) 70px 40px, 1065 | rgba(238,238,238,0) 80px 20px, 1066 | #EEEEEE 110px 70px, 1067 | #EEEEEE 90px 60px; 1068 | box-shadow: 1069 | #EEEEEE 30px 45px, 1070 | #EEEEEE 40px 60px, 1071 | #EEEEEE 50px 90px, 1072 | #EEEEEE 55px 65px, 1073 | rgba(238,238,238,0) 70px 40px, 1074 | rgba(238,238,238,0) 80px 20px, 1075 | #EEEEEE 110px 70px, 1076 | #EEEEEE 90px 60px; 1077 | } 1078 | 50% { 1079 | -webkit-box-shadow: 1080 | #EEEEEE 30px 70px, 1081 | #EEEEEE 40px 80px, 1082 | rgba(238,238,238,0) 50px 100px, 1083 | #EEEEEE 55px 80px, 1084 | #EEEEEE 70px 60px, 1085 | #EEEEEE 80px 45px, 1086 | #EEEEEE 110px 95px, 1087 | #EEEEEE 90px 85px; 1088 | box-shadow: 1089 | #EEEEEE 30px 70px, 1090 | #EEEEEE 40px 80px, 1091 | rgba(238,238,238,0) 50px 100px, 1092 | #EEEEEE 55px 80px, 1093 | #EEEEEE 70px 60px, 1094 | #EEEEEE 80px 45px, 1095 | #EEEEEE 110px 95px, 1096 | #EEEEEE 90px 85px; 1097 | } 1098 | 51% { 1099 | -webkit-box-shadow: 1100 | #EEEEEE 30px 70px, 1101 | #EEEEEE 40px 80px, 1102 | rgba(238,238,238,0) 50px 45px, 1103 | #EEEEEE 55px 80px, 1104 | #EEEEEE 70px 60px, 1105 | #EEEEEE 80px 45px, 1106 | #EEEEEE 110px 95px, 1107 | #EEEEEE 90px 85px; 1108 | box-shadow: 1109 | #EEEEEE 30px 70px, 1110 | #EEEEEE 40px 80px, 1111 | rgba(238,238,238,0) 50px 45px, 1112 | #EEEEEE 55px 80px, 1113 | #EEEEEE 70px 60px, 1114 | #EEEEEE 80px 45px, 1115 | #EEEEEE 110px 95px, 1116 | #EEEEEE 90px 85px; 1117 | } 1118 | 75% { 1119 | -webkit-box-shadow: 1120 | #EEEEEE 30px 95px, 1121 | #EEEEEE 40px 100px, 1122 | #EEEEEE 50px 60px, 1123 | rgba(238,238,238,0) 55px 95px, 1124 | #EEEEEE 70px 80px, 1125 | #EEEEEE 80px 70px, 1126 | rgba(238,238,238,0) 110px 120px, 1127 | rgba(238,238,238,0) 90px 110px; 1128 | box-shadow: 1129 | #EEEEEE 30px 95px, 1130 | #EEEEEE 40px 100px, 1131 | #EEEEEE 50px 60px, 1132 | rgba(238,238,238,0) 55px 95px, 1133 | #EEEEEE 70px 80px, 1134 | #EEEEEE 80px 70px, 1135 | rgba(238,238,238,0) 110px 120px, 1136 | rgba(238,238,238,0) 90px 110px; 1137 | } 1138 | 76% { 1139 | -webkit-box-shadow: 1140 | #EEEEEE 30px 95px, 1141 | #EEEEEE 40px 100px, 1142 | #EEEEEE 50px 60px, 1143 | rgba(238,238,238,0) 55px 35px, 1144 | #EEEEEE 70px 80px, 1145 | #EEEEEE 80px 70px, 1146 | rgba(238,238,238,0) 110px 25px, 1147 | rgba(238,238,238,0) 90px 15px; 1148 | box-shadow: 1149 | #EEEEEE 30px 95px, 1150 | #EEEEEE 40px 100px, 1151 | #EEEEEE 50px 60px, 1152 | rgba(238,238,238,0) 55px 35px, 1153 | #EEEEEE 70px 80px, 1154 | #EEEEEE 80px 70px, 1155 | rgba(238,238,238,0) 110px 25px, 1156 | rgba(238,238,238,0) 90px 15px; 1157 | } 1158 | 100% { 1159 | -webkit-box-shadow: 1160 | rgba(238,238,238,0) 30px 120px, 1161 | rgba(238,238,238,0) 40px 120px, 1162 | #EEEEEE 50px 75px, 1163 | #EEEEEE 55px 50px, 1164 | #EEEEEE 70px 100px, 1165 | #EEEEEE 80px 95px, 1166 | #EEEEEE 110px 45px, 1167 | #EEEEEE 90px 35px; 1168 | box-shadow: 1169 | rgba(238,238,238,0) 30px 120px, 1170 | rgba(238,238,238,0) 40px 120px, 1171 | #EEEEEE 50px 75px, 1172 | #EEEEEE 55px 50px, 1173 | #EEEEEE 70px 100px, 1174 | #EEEEEE 80px 95px, 1175 | #EEEEEE 110px 45px, 1176 | #EEEEEE 90px 35px; 1177 | } 1178 | } 1179 | 1180 | body { 1181 | font-family: sans-serif; 1182 | background: #f5f5f5; 1183 | margin: 0; 1184 | } 1185 | h1 { 1186 | text-align: center; 1187 | font-weight: 400; 1188 | position: absolute; 1189 | width: 100%; 1190 | font-size: 15px; 1191 | top: 50%; 1192 | margin-top: -130px; 1193 | opacity: .6; 1194 | letter-spacing: 6px; 1195 | } 1196 | .container { 1197 | background: -webkit-gradient(linear, left top, right top, from(#00BBFF), color-stop(14.3%, #00BBFF), color-stop(14.3%, #2EB5E5), color-stop(28.6%, #2EB5E5), color-stop(28.6%, #E6E6E6), color-stop(42.9%, #E6E6E6), color-stop(42.9%, #F3D166), color-stop(57.2%, #F3D166), color-stop(57.2%, #222233), color-stop(71.5%, #222233), color-stop(71.5%, #444444), color-stop(85.8%, #444444), color-stop(85.8%, #85DB8C)); 1198 | background: -webkit-linear-gradient(left, #00BBFF, #00BBFF 14.3%, #2EB5E5 14.3%, #2EB5E5 28.6%, #E6E6E6 28.6%, #E6E6E6 42.9%, #F3D166 42.9%, #F3D166 57.2%, #222233 57.2%, #222233 71.5%, #444444 71.5%, #444444 85.8%, #85DB8C 85.8%); 1199 | background: linear-gradient(left, #00BBFF, #00BBFF 14.3%, #2EB5E5 14.3%, #2EB5E5 28.6%, #E6E6E6 28.6%, #E6E6E6 42.9%, #F3D166 42.9%, #F3D166 57.2%, #222233 57.2%, #222233 71.5%, #444444 71.5%, #444444 85.8%, #85DB8C 85.8%); 1200 | -webkit-transform: scale(.9); 1201 | -ms-transform: scale(.9); 1202 | transform: scale(.9); 1203 | width: 1200px; 1204 | position: absolute; 1205 | height: 210px; 1206 | left: 50%; 1207 | top: 50%; 1208 | margin: -65px -600px; 1209 | } 1210 | --------------------------------------------------------------------------------