.windmill { position: absolute; width: 100%; height: 100vh; margin: auto; overflow: hidden; background: #649ECD; left: 0; top: 0; z-index: 100; } .windmill__sun { position: absolute; height: 30px; width: 30px; top: 6%; left: 20%; border-radius: 100%; background: #B6E2FF; box-shadow: 0 0 300px 80px #B6E2FF, 0 0 200px 40px #B6E2FF, 0 0 50px 10px #B6E2FF; } .windmill__slice-4 { position: absolute; width: 0; height: 0; top: 179px; left: 105px; border-left: 300px solid transparent; border-right: 300px solid transparent; border-bottom: 250px solid #649ECD; } .windmill__slice-4:after { content: ''; position: absolute; width: 0; height: 0; top: 55px; left: -70px; border-left: 180px solid transparent; border-right: 180px solid transparent; border-bottom: 195px solid #649ECD; } .windmill__slice-4:before { content: ''; position: absolute; width: 0; height: 0; top: 80px; left: 60px; border-left: 120px solid transparent; border-right: 120px solid transparent; border-bottom: 170px solid #649ECD; } .windmill__slice-4 div { position: absolute; width: 0; height: 0; top: 95px; left: -392px; border-left: 170px solid transparent; border-right: 170px solid transparent; border-bottom: 155px solid #649ECD; } .windmill__slice-4 div:after { content: ''; position: absolute; width: 0; height: 0; top: 20px; left: -115px; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 135px solid #649ECD; } .windmill__slice-4 div:before { content: ''; position: absolute; width: 0; height: 0; top: -38px; left: -105px; border-left: 220px solid transparent; border-right: 220px solid transparent; border-bottom: 195px solid #649ECD; } .windmill__slice-3 { position: absolute; width: 0; height: 0; bottom: 0; left: -15px; border-left: 320px solid transparent; border-right: 320px solid transparent; border-bottom: 150px solid #6096C4; } .windmill__slice-3:after { content: ''; position: absolute; width: 0; height: 0; top: 23px; left: -78px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 15px solid #6096C4; } .windmill__slice-3:before { content: ''; position: absolute; width: 0; height: 0; top: 31px; left: 89px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 15px solid #6096C4; } .windmill__slice-3 .windmill__tree-right { position: absolute; width: 0; height: 0; top: 2px; left: 33px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 20px solid #6096C4; opacity: .5; } .windmill__slice-3 .windmill__tree-right:after { content: ''; position: absolute; width: 0; height: 0; top: 15px; left: 36px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 25px solid #6096C4; } .windmill__slice-3 .windmill__tree-right:before { content: ''; position: absolute; width: 0; height: 0; top: -2px; left: -19px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 16px solid #6096C4; } .windmill__slice-3 .windmill__tree-left { position: absolute; width: 0; height: 0; top: -4px; left: -30px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 20px solid #6096C4; } .windmill__slice-3 .windmill__tree-left:after { content: ''; position: absolute; width: 0; height: 0; top: 11px; left: -12px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 15px solid #6096C4; } .windmill__slice-3 .windmill__tree-left:before { content: ''; position: absolute; width: 0; height: 0; top: 19px; left: -46px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 20px solid #6096C4; } .windmill__slice-2 { position: absolute; width: 0; height: 0; bottom: 0; left: 205px; border-left: 250px solid transparent; border-right: 250px solid transparent; border-bottom: 110px solid #508BB3; } .windmill__slice-2:after { content: ''; position: absolute; width: 0; height: 0; top: 13px; left: 46px; border-left: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 10px solid #508BB3; } .windmill__slice-2:before { content: ''; position: absolute; width: 0; height: 0; top: 10px; left: 39px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 12px solid #508BB3; } .windmill__slice-2 .windmill__tree-right { position: absolute; width: 0; height: 0; top: 6px; left: -45px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 17px #508BB3; } .windmill__slice-2 .windmill__tree-right:after { content: ''; position: absolute; width: 0; height: 0; top: -16px; left: 13px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 24px solid #508BB3; } .windmill__slice-2 .windmill__tree-right:before { content: ''; position: absolute; width: 0; height: 0; top: -11px; left: 26px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 15px solid #508BB3; } .windmill__slice-2 .windmill__tree-middle { position: absolute; width: 0; height: 0; top: 26px; left: -88px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 15px solid #508BB3; } .windmill__slice-2 .windmill__tree-middle:after { content: ''; position: absolute; width: 0; height: 0; top: -13px; left: 7px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 24px solid #508BB3; } .windmill__slice-2 .windmill__tree-middle:before { content: ''; position: absolute; width: 0; height: 0; top: -18px; left: 21px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 28px solid #508BB3; } .windmill__slice-2 .windmill__tree-left { position: absolute; width: 0; height: 0; top: 41px; left: -151px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 30px solid #508BB3; } .windmill__slice-2 .windmill__tree-left:after { content: ''; position: absolute; width: 0; height: 0; top: 2px; left: 8px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 20px solid #508BB3; } .windmill__slice-2 .windmill__tree-left:before { content: ''; position: absolute; width: 0; height: 0; top: -10px; left: 19px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 28px solid #508BB3; } .windmill__slice-1 { position: absolute; width: 0; height: 0; top: 190px; left: 0px; border-right: 400px solid transparent; border-bottom: 315px solid #14222D; } .windmill__slice-1:after { content: ''; position: absolute; width: 0; height: 0; top: 150px; left: 390px; border-left: 230px solid transparent; border-right: 520px solid transparent; border-bottom: 175px solid #14222D; } .windmill__slice-1:before { content: ''; position: absolute; width: 400px; height: 80px; top: 240px; left: 180px; border-radius: 100% 100% 0 0; background: #14222D; } .windmill__slice-1 .windmill__tree-right { position: absolute; width: 0; height: 0; top: 112px; left: 747px; border-left: 26px solid transparent; border-right: 26px solid transparent; border-bottom: 120px solid #14222D; } .windmill__slice-1 .windmill__tree-right:after { content: ''; position: absolute; width: 10px; height: 20px; top: 60px; left: -49px; background: #14222D; } .windmill__slice-1 .windmill__tree-right:before { content: ''; position: absolute; width: 50px; height: 50px; top: 14px; left: -69px; background: #14222D; border-radius: 50% 0 50% 50%; transform: rotate(-45deg); } .windmill__slice-1 .windmill__tree-left { position: absolute; width: 0; height: 0; top: -42px; left: 40px; border-left: 26px solid transparent; border-right: 26px solid transparent; border-bottom: 120px solid #14222D; } .windmill__slice-1 .windmill__tree-left:after { content: ''; position: absolute; width: 0; height: 0; top: 187px; left: 461px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 80px solid #14222D; } .windmill__slice-1 .windmill__tree-left:before { content: ''; position: absolute; width: 0; height: 0; top: 88px; left: 47px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 75px solid #14222D; } .windmill__clouds { position: absolute; } .windmill__cloud { position: absolute; width: 200px; height: 40px; border-radius: 40px; background: #B6E2FF; opacity: .3; } .windmill__cloud:before { content: ''; position: absolute; top: -20px; left: 30px; width: 100px; height: 30px; border-radius: 20px; background: #B6E2FF; } .windmill__cloud:after { content: ''; position: absolute; top: -30px; left: 70px; width: 100px; height: 50px; border-radius: 50px; background: #B6E2FF; } .windmill__cloud:nth-child(1) { top: 140px; left: 150px; animation: cloud 58s linear infinite; animation-delay: -20s; } .windmill__cloud:nth-child(2) { top: 210px; left: 30px; transform: scale(0.4); animation: cloud 60s linear infinite; animation-delay: -12s; } .windmill__cloud:nth-child(3) { top: 270px; left: 650px; transform: scale(0.3); animation: cloud 62s linear infinite; animation-delay: -10s; } .windmill__cloud:nth-child(4) { top: 260px; left: 360px; transform: scale(0.8); animation: cloud 64s linear infinite; animation-delay: -30s; } .windmill__cloud:nth-child(5) { top: 90px; left: 500px; transform: scale(0.5); animation: cloud 56s linear infinite; animation-delay: -25s; } .windmill__cloud:nth-child(6) { top: 140px; left: 710px; transform: scale(0.7); animation: cloud 60s linear infinite; animation-delay: -50s; } .windmill__windmill { position: absolute; bottom: -30px; left: 50px; width: 75px; border-style: solid; border-color: #1e3b52 transparent; border-width: 0 10px 135px; } .windmill__windmill:after { content: ''; position: absolute; width: 8px; height: 8px; top: 7px; left: 25px; transform: rotate(45deg); background: #B6E2FF; } .windmill__windmill:before { content: ''; position: absolute; width: 0; height: 0; top: -48px; left: -12px; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 50px solid #153650; } .windmill__blades { position: absolute; top: 6px; left: 30px; animation: blades 12s linear infinite; } .windmill__blade { position: absolute; height: 80px; width: 24px; border: 2px solid #14222D; } .windmill__blade:after { content: ''; position: absolute; top: 15px; left: -2px; height: 14px; width: 24px; border: 2px solid #14222D; } .windmill__blade:before { content: ''; position: absolute; top: 47px; left: -2px; height: 14px; width: 24px; border: 2px solid #14222D; } .windmill__blade:nth-child(1) { top: -84px; left: -13px; } .windmill__blade:nth-child(2) { bottom: -84px; left: -13px; } .windmill__blade:nth-child(3) { transform: rotate(90deg); top: -43px; left: -56px; } .windmill__blade:nth-child(4) { transform: rotate(90deg); top: -43px; left: 28px; } .windmill__snowflakes { position: absolute; } .windmill__snowflake { position: absolute; background: #B6E2FF; transform: rotate(45deg); top: -200px; animation: snowflake 30s linear infinite; opacity: .5; } .windmill__snowflake:before { content: ''; position: absolute; background: #B6E2FF; } .windmill__snowflake:after { content: ''; position: absolute; background: #B6E2FF; } .windmill__snowflake:nth-child(1) { height: 5px; width: 5px; left: 100px; animation-delay: 20s; } .windmill__snowflake:nth-child(1):before { height: 7px; width: 7px; left: -15px; top: 137px; } .windmill__snowflake:nth-child(1):after { height: 5px; width: 5px; left: 40px; top: 320px; } .windmill__snowflake:nth-child(2) { height: 5px; width: 5px; left: 200px; animation-delay: 10s; } .windmill__snowflake:nth-child(2):before { height: 5px; width: 5px; left: -157px; top: 226px; } .windmill__snowflake:nth-child(2):after { height: 6px; width: 6px; left: -51px; top: 381px; } .windmill__snowflake:nth-child(3) { height: 5px; width: 5px; left: 300px; } .windmill__snowflake:nth-child(3):before { height: 6px; width: 6px; left: -155px; top: 186px; } .windmill__snowflake:nth-child(3):after { height: 5px; width: 5px; left: -57px; top: 109px; } .windmill__snowflake:nth-child(4) { height: 8px; width: 8px; left: 400px; animation-delay: 14s; } .windmill__snowflake:nth-child(4):before { height: 8px; width: 8px; left: -96px; top: 215px; } .windmill__snowflake:nth-child(4):after { height: 6px; width: 6px; left: -206px; top: 71px; } .windmill__snowflake:nth-child(5) { height: 7px; width: 7px; left: 500px; animation-delay: -24s; } .windmill__snowflake:nth-child(5):before { height: 7px; width: 7px; left: -244px; top: 96px; } .windmill__snowflake:nth-child(5):after { height: 7px; width: 7px; left: 100px; top: 217px; } .windmill__snowflake:nth-child(6) { height: 8px; width: 8px; left: 600px; } .windmill__snowflake:nth-child(6):before { height: 8px; width: 8px; left: 110px; top: 150px; } .windmill__snowflake:nth-child(6):after { height: 8px; width: 8px; left: 30px; top: 276px; } .windmill__snowflake:nth-child(7) { height: 6px; width: 6px; left: 700px; animation-delay: -22s; } .windmill__snowflake:nth-child(7):before { height: 6px; width: 6px; left: 247px; top: 220px; } .windmill__snowflake:nth-child(7):after { height: 6px; width: 6px; left: 143px; top: 306px; } .windmill__snowflake:nth-child(8) { height: 6px; width: 6px; left: 800px; animation-delay: -17s; } .windmill__snowflake:nth-child(8):before { height: 6px; width: 6px; left: 10px; top: 343px; } .windmill__snowflake:nth-child(8):after { height: 8px; width: 8px; left: -105px; top: 239px; } .windmill__snowflake:nth-child(9) { height: 7px; width: 7px; left: 900px; } .windmill__snowflake:nth-child(9):before { height: 8px; width: 8px; left: 133px; top: 211px; } .windmill__snowflake:nth-child(9):after { height: 5px; width: 5px; left: -65px; top: 243px; } .windmill__snowflake:nth-child(10) { height: 7px; width: 7px; left: 1000px; animation-delay: 17s; } .windmill__snowflake:nth-child(10):before { height: 7px; width: 7px; left: -119px; top: 207px; } .windmill__snowflake:nth-child(10):after { height: 7px; width: 7px; left: 166px; top: 4px; } .windmill__snowflake:nth-child(11) { height: 4px; width: 4px; left: 150px; animation-delay: -22s; } .windmill__snowflake:nth-child(11):before { height: 7px; width: 7px; left: -117px; top: 259px; } .windmill__snowflake:nth-child(11):after { height: 9px; width: 9px; left: 230px; top: 81px; } .windmill__snowflake:nth-child(12) { height: 7px; width: 7px; left: 250px; } .windmill__snowflake:nth-child(12):before { height: 6px; width: 6px; left: -17px; top: 226px; } .windmill__snowflake:nth-child(12):after { height: 8px; width: 8px; left: 33px; top: 64px; } .windmill__snowflake:nth-child(13) { height: 5px; width: 5px; left: 350px; animation-delay: 19s; } .windmill__snowflake:nth-child(13):before { height: 7px; width: 7px; left: -138px; top: 192px; } .windmill__snowflake:nth-child(13):after { height: 7px; width: 7px; left: 241px; top: 20px; } .windmill__snowflake:nth-child(14) { height: 4px; width: 4px; left: 450px; animation-delay: 15s; } .windmill__snowflake:nth-child(14):before { height: 7px; width: 7px; left: -173px; top: 222px; } .windmill__snowflake:nth-child(14):after { height: 5px; width: 5px; left: 236px; top: 27px; } .windmill__snowflake:nth-child(15) { height: 7px; width: 7px; left: 550px; } .windmill__snowflake:nth-child(15):before { height: 7px; width: 7px; left: -131px; top: 241px; } .windmill__snowflake:nth-child(15):after { height: 7px; width: 7px; left: 426px; top: 128px; } .windmill__snowflake:nth-child(16) { height: 5px; width: 5px; left: 650px; animation-delay: 22s; } .windmill__snowflake:nth-child(16):before { height: 7px; width: 7px; left: -154px; top: 232px; } .windmill__snowflake:nth-child(16):after { height: 6px; width: 6px; left: 126px; top: 123px; } .windmill__snowflake:nth-child(17) { height: 5px; width: 5px; left: 750px; animation-delay: -8s; } .windmill__snowflake:nth-child(17):before { height: 7px; width: 7px; left: -178px; top: 284px; } .windmill__snowflake:nth-child(17):after { height: 6px; width: 6px; left: 150px; top: 208px; } .windmill__snowflake:nth-child(18) { height: 5px; width: 5px; left: 850px; } .windmill__snowflake:nth-child(18):before { height: 7px; width: 7px; left: -165px; top: 247px; } .windmill__snowflake:nth-child(18):after { height: 6px; width: 6px; left: 110px; top: 216px; } .windmill__snowflake:nth-child(19) { height: 5px; width: 5px; left: 950px; animation-delay: -13s; } .windmill__snowflake:nth-child(19):before { height: 7px; width: 7px; left: -14px; top: 362px; } .windmill__snowflake:nth-child(19):after { height: 6px; width: 6px; left: 226px; top: 243px; } .windmill__snowflake:nth-child(20) { height: 5px; width: 5px; left: 50px; animation-delay: -9s; } .windmill__snowflake:nth-child(20):before { height: 7px; width: 7px; left: -194px; top: 255px; } .windmill__snowflake:nth-child(20):after { height: 6px; width: 6px; left: 246px; top: 233px; } .windmill__snowflake:nth-child(21) { height: 7px; width: 7px; left: 600px; } .windmill__snowflake:nth-child(21):before { height: 7px; width: 7px; left: -248px; top: 218px; } .windmill__snowflake:nth-child(21):after { height: 6px; width: 6px; left: 133px; top: 101px; } .windmill__snowflake:nth-child(22) { height: 5px; width: 5px; left: 800px; animation-delay: -11s; } .windmill__snowflake:nth-child(22):before { height: 7px; width: 7px; left: -44px; top: 342px; } .windmill__snowflake:nth-child(22):after { height: 6px; width: 6px; left: 126px; top: 123px; } /* Анимации */ @keyframes blades { 100% { transform: rotate(-360deg); } } @keyframes cloud { 0% { transform: translateX(750px); } 100% { transform: translateX(-450px); } } @keyframes snowflake { 0% { transform: rotate(45deg) translateX(0) translateY(116px); } 20% { transform: rotate(45deg) translateX(-10px) translateY(232px); } 40% { transform: rotate(45deg) translateX(-50px) translateY(348px); } 60% { transform: rotate(45deg) translateX(-150px) translateY(464px); } 80% { transform: rotate(45deg) translateX(-100px) translateY(580px); } 100% { transform: rotate(45deg) translateX(-50px) translateY(700px); } }