Loader by Admin12121
#212121
1@keyframes stageBackground { 2 0%, 10%, 90%, 100% { 3 background-color: #00B6BB; 4 } 5 6 25%, 75% { 7 background-color: #0094bd; 8 } 9} 10 11@keyframes earthRotation { 12 from { 13 transform: rotate(0deg); 14 } 15 16 to { 17 transform: rotate(360deg); 18 } 19} 20 21@keyframes sunrise { 22 0%, 10%, 90%, 100% { 23 box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3); 24 } 25 26 25%, 75% { 27 box-shadow: 0 0 0 0 #5ad6bd, 0 0 0 0 #4acead, 0 0 0 0 rgba(74, 206, 173, 0.6), 0 0 0 0 rgba(74, 206, 173, 0.3); 28 } 29} 30 31@keyframes moonOrbit { 32 25% { 33 transform: rotate(-60deg); 34 } 35 36 50% { 37 transform: rotate(-60deg); 38 } 39 40 75% { 41 transform: rotate(-120deg); 42 } 43 44 0%, 100% { 45 transform: rotate(-180deg); 46 } 47} 48 49@keyframes nightTime { 50 0%, 90% { 51 opacity: 0; 52 } 53 54 50%, 75% { 55 opacity: 1; 56 } 57} 58 59@keyframes hotPan { 60 0%, 90% { 61 background-color: #74667e; 62 } 63 64 50%, 75% { 65 background-color: #b2241c; 66 } 67} 68 69@keyframes heat { 70 0%, 90% { 71 box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.3); 72 } 73 74 50%, 75% { 75 box-shadow: inset 0 -2px 0 0 white; 76 } 77} 78 79@keyframes smoke { 80 0%, 50%, 90%, 100% { 81 opacity: 0; 82 } 83 84 50%, 75% { 85 opacity: 0.7; 86 } 87} 88 89@keyframes fire { 90 0%, 90%, 100% { 91 opacity: 0; 92 } 93 94 50%, 75% { 95 opacity: 1; 96 } 97} 98 99@keyframes treeShake { 100 0% { 101 transform: rotate(0deg); 102 } 103 104 25% { 105 transform: rotate(-2deg); 106 } 107 108 40% { 109 transform: rotate(4deg); 110 } 111 112 50% { 113 transform: rotate(-4deg); 114 } 115 116 60% { 117 transform: rotate(6deg); 118 } 119 120 75% { 121 transform: rotate(-6deg); 122 } 123 124 100% { 125 transform: rotate(0deg); 126 } 127} 128 129@keyframes fireParticles { 130 0% { 131 height: 30%; 132 opacity: 1; 133 top: 75%; 134 } 135 136 25% { 137 height: 25%; 138 opacity: 0.8; 139 top: 40%; 140 } 141 142 50% { 143 height: 15%; 144 opacity: 0.6; 145 top: 20%; 146 } 147 148 75% { 149 height: 10%; 150 opacity: 0.3; 151 top: 0; 152 } 153 154 100% { 155 opacity: 0; 156 } 157} 158 159@keyframes fireLines { 160 0%, 25%, 75%, 100% { 161 bottom: 0; 162 } 163 164 50% { 165 bottom: 5%; 166 } 167} 168 169.scene { 170 display: flex; 171 margin: 0 auto 80px auto; 172 justify-content: center; 173 align-items: flex-end; 174 width: 400px; 175 height: 300px; 176 position: relative; 177} 178 179.forest { 180 display: flex; 181 width: 75%; 182 height: 90%; 183 position: relative; 184} 185 186.tree { 187 display: block; 188 width: 50%; 189 position: absolute; 190 bottom: 0; 191 opacity: 0.4; 192} 193 194.tree .branch { 195 width: 80%; 196 height: 0; 197 margin: 0 auto; 198 padding-left: 40%; 199 padding-bottom: 50%; 200 overflow: hidden; 201} 202 203.tree .branch:before { 204 content: ""; 205 display: block; 206 width: 0; 207 height: 0; 208 margin-left: -600px; 209 border-left: 600px solid transparent; 210 border-right: 600px solid transparent; 211 border-bottom: 950px solid #000; 212} 213 214.tree .branch.branch-top { 215 transform-origin: 50% 100%; 216 animation: treeShake 0.5s linear infinite; 217} 218 219.tree .branch.branch-middle { 220 width: 90%; 221 padding-left: 45%; 222 padding-bottom: 65%; 223 margin: 0 auto; 224 margin-top: -25%; 225} 226 227.tree .branch.branch-bottom { 228 width: 100%; 229 padding-left: 50%; 230 padding-bottom: 80%; 231 margin: 0 auto; 232 margin-top: -40%; 233} 234 235.tree1 { 236 width: 31%; 237} 238 239.tree1 .branch-top { 240 transition-delay: 0.3s; 241} 242 243.tree2 { 244 width: 39%; 245 left: 9%; 246} 247 248.tree2 .branch-top { 249 transition-delay: 0.4s; 250} 251 252.tree3 { 253 width: 32%; 254 left: 24%; 255} 256 257.tree3 .branch-top { 258 transition-delay: 0.5s; 259} 260 261.tree4 { 262 width: 37%; 263 left: 34%; 264} 265 266.tree4 .branch-top { 267 transition-delay: 0.6s; 268} 269 270.tree5 { 271 width: 44%; 272 left: 44%; 273} 274 275.tree5 .branch-top { 276 transition-delay: 0.7s; 277} 278 279.tree6 { 280 width: 34%; 281 left: 61%; 282} 283 284.tree6 .branch-top { 285 transition-delay: 0.2s; 286} 287 288.tree7 { 289 width: 24%; 290 left: 76%; 291} 292 293.tree7 .branch-top { 294 transition-delay: 0.1s; 295} 296 297.tent { 298 width: 60%; 299 height: 25%; 300 position: absolute; 301 bottom: -0.5%; 302 right: 15%; 303 z-index: 1; 304 text-align: right; 305} 306 307.roof { 308 display: inline-block; 309 width: 45%; 310 height: 100%; 311 margin-right: 10%; 312 position: relative; 313 /*bottom: 0; 314 right: 9%;*/ 315 z-index: 1; 316 border-top: 4px solid #4D4454; 317 border-right: 4px solid #4D4454; 318 border-left: 4px solid #4D4454; 319 border-top-right-radius: 6px; 320 transform: skew(30deg); 321 box-shadow: inset -3px 3px 0px 0px #F7B563; 322 /*background: linear-gradient( 323 to bottom, 324 rgba(246,212,132,1) 0%, 325 rgba(246,212,132,1) 24%, 326 rgba(#F0B656,1) 25%, 327 rgba(#F0B656,1) 74%, 328 rgba(235,151,53,1) 75%, 329 rgba(235,151,53,1) 100% 330 );*/ 331 background: #f6d484; 332} 333 334.roof:before { 335 content: ""; 336 width: 70%; 337 height: 70%; 338 position: absolute; 339 top: 15%; 340 left: 15%; 341 z-index: 0; 342 border-radius: 10%; 343 background-color: #E78C20; 344} 345 346.roof:after { 347 content: ""; 348 height: 75%; 349 width: 100%; 350 position: absolute; 351 bottom: 0; 352 right: 0; 353 z-index: 1; 354 background: linear-gradient(to bottom, rgba(231, 140, 32, 0.4) 0%, rgba(231, 140, 32, 0.4) 64%, rgba(231, 140, 32, 0.8) 65%, rgba(231, 140, 32, 0.8) 100%); 355} 356 357.roof-border-left { 358 display: flex; 359 justify-content: space-between; 360 flex-direction: column; 361 width: 1%; 362 height: 125%; 363 position: absolute; 364 top: 0; 365 left: 35.7%; 366 z-index: 1; 367 transform-origin: 50% 0%; 368 transform: rotate(35deg); 369} 370 371.roof-border-left .roof-border { 372 display: block; 373 width: 100%; 374 border-radius: 2px; 375 border: 2px solid #4D4454; 376} 377 378.roof-border-left .roof-border1 { 379 height: 40%; 380} 381 382.roof-border-left .roof-border2 { 383 height: 10%; 384} 385 386.roof-border-left .roof-border3 { 387 height: 40%; 388} 389 390.door { 391 width: 55px; 392 height: 92px; 393 position: absolute; 394 bottom: 2%; 395 overflow: hidden; 396 z-index: 0; 397 transform-origin: 0 105%; 398} 399 400.left-door { 401 transform: rotate(35deg); 402 position: absolute; 403 left: 13.5%; 404 bottom: -3%; 405 z-index: 0; 406} 407 408.left-door .left-door-inner { 409 width: 100%; 410 height: 100%; 411 transform-origin: 0 105%; 412 transform: rotate(-35deg); 413 position: absolute; 414 top: 0; 415 overflow: hidden; 416 background-color: #EDDDC2; 417} 418 419.left-door .left-door-inner:before { 420 content: ""; 421 width: 15%; 422 height: 100%; 423 position: absolute; 424 top: 0; 425 right: 0; 426 background: repeating-linear-gradient(#D4BC8B, #D4BC8B 4%, #E0D2A8 5%, #E0D2A8 10%); 427} 428 429.left-door .left-door-inner:after { 430 content: ""; 431 width: 50%; 432 height: 100%; 433 position: absolute; 434 top: 15%; 435 left: 10%; 436 transform: rotate(25deg); 437 background-color: #fff; 438} 439 440.right-door { 441 height: 89px; 442 right: 21%; 443 transform-origin: 0 105%; 444 transform: rotate(-30deg) scaleX(-1); 445 position: absolute; 446 bottom: -3%; 447 z-index: 0; 448} 449 450.right-door .right-door-inner { 451 width: 100%; 452 height: 100%; 453 transform-origin: 0 120%; 454 transform: rotate(-30deg); 455 position: absolute; 456 bottom: 0px; 457 overflow: hidden; 458 background-color: #EFE7CF; 459} 460 461.right-door .right-door-inner:before { 462 content: ""; 463 width: 50%; 464 height: 100%; 465 position: absolute; 466 top: 15%; 467 right: -28%; 468 z-index: 1; 469 transform: rotate(15deg); 470 background-color: #524A5A; 471} 472 473.right-door .right-door-inner:after { 474 content: ""; 475 width: 50%; 476 height: 100%; 477 position: absolute; 478 top: 15%; 479 right: -20%; 480 transform: rotate(20deg); 481 background-color: #fff; 482} 483 484.floor { 485 width: 80%; 486 position: absolute; 487 right: 10%; 488 bottom: 0; 489 z-index: 1; 490} 491 492.floor .ground { 493 position: absolute; 494 border-radius: 2px; 495 border: 2px solid #4D4454; 496} 497 498.floor .ground.ground1 { 499 width: 65%; 500 left: 0; 501} 502 503.floor .ground.ground2 { 504 width: 30%; 505 right: 0; 506} 507 508.fireplace { 509 display: block; 510 width: 24%; 511 height: 20%; 512 position: absolute; 513 left: 5%; 514} 515 516.fireplace:before { 517 content: ""; 518 display: block; 519 width: 8%; 520 position: absolute; 521 bottom: -4px; 522 left: 2%; 523 border-radius: 2px; 524 border: 2px solid #4D4454; 525 background: #4D4454; 526} 527 528.fireplace .support { 529 display: block; 530 height: 105%; 531 width: 2px; 532 position: absolute; 533 bottom: -5%; 534 left: 10%; 535 border: 2px solid #4D4454; 536} 537 538.fireplace .support:before { 539 content: ""; 540 width: 100%; 541 height: 15%; 542 position: absolute; 543 top: -18%; 544 left: -4px; 545 border-radius: 2px; 546 border: 2px solid #4D4454; 547 transform-origin: 100% 100%; 548 transform: rotate(45deg); 549} 550 551.fireplace .support:after { 552 content: ""; 553 width: 100%; 554 height: 15%; 555 position: absolute; 556 top: -18%; 557 left: 0px; 558 border-radius: 2px; 559 border: 2px solid #4D4454; 560 transform-origin: 0 100%; 561 transform: rotate(-45deg); 562} 563 564.fireplace .support:nth-child(1) { 565 left: 85%; 566} 567 568.fireplace .bar { 569 width: 100%; 570 height: 2px; 571 border-radius: 2px; 572 border: 2px solid #4D4454; 573} 574 575.fireplace .hanger { 576 display: block; 577 width: 2px; 578 height: 25%; 579 margin-left: -4px; 580 position: absolute; 581 left: 50%; 582 border: 2px solid #4D4454; 583} 584 585.fireplace .pan { 586 display: block; 587 width: 25%; 588 height: 50%; 589 border-radius: 50%; 590 border: 4px solid #4D4454; 591 position: absolute; 592 top: 25%; 593 left: 35%; 594 overflow: hidden; 595 animation: heat 5s linear infinite; 596} 597 598.fireplace .pan:before { 599 content: ""; 600 display: block; 601 height: 53%; 602 width: 100%; 603 position: absolute; 604 bottom: 0; 605 z-index: -1; 606 border-top: 4px solid #4D4454; 607 background-color: #74667e; 608 animation: hotPan 5s linear infinite; 609} 610 611.fireplace .smoke { 612 display: block; 613 width: 20%; 614 height: 25%; 615 position: absolute; 616 top: 25%; 617 left: 37%; 618 background-color: white; 619 filter: blur(5px); 620 animation: smoke 5s linear infinite; 621} 622 623.fireplace .fire { 624 display: block; 625 width: 25%; 626 height: 120%; 627 position: absolute; 628 bottom: 0; 629 left: 33%; 630 z-index: 1; 631 animation: fire 5s linear infinite; 632} 633 634.fireplace .fire:before { 635 content: ""; 636 display: block; 637 width: 100%; 638 height: 2px; 639 position: absolute; 640 bottom: -4px; 641 z-index: 1; 642 border-radius: 2px; 643 border: 1px solid #efb54a; 644 background-color: #efb54a; 645} 646 647.fireplace .fire .line { 648 display: block; 649 width: 2px; 650 height: 100%; 651 position: absolute; 652 bottom: 0; 653 animation: fireLines 1s linear infinite; 654} 655 656.fireplace .fire .line2 { 657 left: 50%; 658 margin-left: -1px; 659 animation-delay: 0.3s; 660} 661 662.fireplace .fire .line3 { 663 right: 0; 664 animation-delay: 0.5s; 665} 666 667.fireplace .fire .line .particle { 668 height: 10%; 669 position: absolute; 670 top: 100%; 671 z-index: 1; 672 border-radius: 2px; 673 border: 2px solid #efb54a; 674 animation: fireParticles 0.5s linear infinite; 675} 676 677.fireplace .fire .line .particle1 { 678 animation-delay: 0.1s; 679} 680 681.fireplace .fire .line .particle2 { 682 animation-delay: 0.3s; 683} 684 685.fireplace .fire .line .particle3 { 686 animation-delay: 0.6s; 687} 688 689.fireplace .fire .line .particle4 { 690 animation-delay: 0.9s; 691} 692 693.time-wrapper { 694 display: block; 695 width: 100%; 696 height: 100%; 697 position: absolute; 698 overflow: hidden; 699} 700 701.time { 702 display: block; 703 width: 100%; 704 height: 200%; 705 position: absolute; 706 transform-origin: 50% 50%; 707 transform: rotate(270deg); 708 animation: earthRotation 5s linear infinite; 709} 710 711.time .day { 712 display: block; 713 width: 20px; 714 height: 20px; 715 position: absolute; 716 top: 20%; 717 left: 40%; 718 border-radius: 50%; 719 box-shadow: 0 0 0 25px #5ad6bd, 0 0 0 40px #4acead, 0 0 0 60px rgba(74, 206, 173, 0.6), 0 0 0 90px rgba(74, 206, 173, 0.3); 720 animation: sunrise 5s ease-in-out infinite; 721 background-color: #ef9431; 722} 723 724.time .night { 725 animation: nightTime 5s ease-in-out infinite; 726} 727 728.time .night .star { 729 display: block; 730 width: 4px; 731 height: 4px; 732 position: absolute; 733 bottom: 10%; 734 border-radius: 50%; 735 background-color: #fff; 736} 737 738.time .night .star-big { 739 width: 6px; 740 height: 6px; 741} 742 743.time .night .star1 { 744 right: 23%; 745 bottom: 25%; 746} 747 748.time .night .star2 { 749 right: 35%; 750 bottom: 18%; 751} 752 753.time .night .star3 { 754 right: 47%; 755 bottom: 25%; 756} 757 758.time .night .star4 { 759 right: 22%; 760 bottom: 20%; 761} 762 763.time .night .star5 { 764 right: 18%; 765 bottom: 30%; 766} 767 768.time .night .star6 { 769 right: 60%; 770 bottom: 20%; 771} 772 773.time .night .star7 { 774 right: 70%; 775 bottom: 23%; 776} 777 778.time .night .moon { 779 display: block; 780 width: 25px; 781 height: 25px; 782 position: absolute; 783 bottom: 22%; 784 right: 33%; 785 border-radius: 50%; 786 transform: rotate(-60deg); 787 box-shadow: 9px 9px 3px 0 white; 788 filter: blur(1px); 789 animation: moonOrbit 5s ease-in-out infinite; 790} 791 792.time .night .moon:before { 793 content: ""; 794 display: block; 795 width: 100%; 796 height: 100%; 797 position: absolute; 798 bottom: -9px; 799 left: 9px; 800 border-radius: 50%; 801 box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.05), 0 0 0 15px rgba(255, 255, 255, 0.05), 0 0 0 25px rgba(255, 255, 255, 0.05), 0 0 0 35px rgba(255, 255, 255, 0.05); 802 background-color: rgba(255, 255, 255, 0.2); 803}
1.9K views
1.9K views
MIT License