* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .fj { overflow: hidden; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; position: relative; align-items: flex-end; background: linear-gradient(to left top, #8ec7c8 0%, #ffffff 100%); } .ground { height: 130px; background: green; width: 100%; border-top: 5px solid #550000; } .planes { position: absolute; top: 300px; left: 300px; z-index: 100; width: 250px; animation: planeFei ease-in-out .5s infinite; } .planes>img { width: 100%; } .planes>div { width: 200px; height: 8px; margin-left: 30px; background: #550000; animation: routes ease-in-out 0.5s infinite; } @keyframes routes { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(0deg); } } @keyframes planeFei { 0% { top: 400px; } 50% { top: 350px; } 100% { top: 400px; } } .cloud { position: absolute; top: 100px; right: -130px; z-index: 600; width: 130px; } .cloundOne { animation: cloudAni linear .2s infinite; } .cloudTwo { top: 300px !important; animation: opctiAni linear .3s infinite; animation-delay: 0.5s; } @keyframes opctiAni { 0% { right: -130px; } 73% { opacity: 1; } 74% { opacity: 0.2; } 80% { opacity: 1; } 100% { right: 100%; } } @keyframes cloudAni { 0% { right: -130px; } 100% { right: 100%; } } .cloud>div { width: 75px; height: 75px; position: absolute; top: 0; border-radius: 50%; background-color: #fff; } .cloud>div:not(:first-child) { top: 40px; } .cloud>div:nth-of-type(1) { left: 50%; transform: translateX(-50%); } .cloud>div:nth-of-type(2) { left: 0; } .cloud>div:nth-of-type(3) { right: 0; } .plane { height: 300px; width: 490px; position: absolute; bottom: 0%; left: 37%; z-index: 3; animation: planeFei ease-in-out .7s infinite; } .plane .frame, .plane .tube, .plane .tube::after, .plane .tube::before, .plane .frame::after, .plane .wrings-left, .plane .wrings-right, .plane .wrings-right::after, .plane .wrings-left::after, .plane .tail-left, .plane .tail-right, .plane .tail-top, .plane .tail-top::after { background: #fff; border: 1px solid #000; } .plane .frame { z-index: 1; height: 60px; width: 405px; position: absolute; top: 100px; right: 50px; border-radius: 120% 160% 50% 220%; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .plane .afterbody {} .plane .frame::after { content: ""; height: 56px; width: 400px; position: absolute; top: 8px; left: 25px; border-radius: 120% 167% 113% 100%; clip: rect(0px 410px 60px 370px); } .plane .frame::before { content: ""; height: 30px; width: 50px; position: absolute; top: 5px; right: -2px; border-radius: 50% 50% 50% 50%; -webkit-transform: rotate(10deg); transform: rotate(10deg); border-right: 1px solid #000; background: #fff; clip: rect(16px 70px 40px 31px); z-index: 1;

} .plane .frame .windows { position: absolute; top: 21px; left: 100px; width: 7px; height: 12px; background: #666; box-shadow: 15px 0px 0px #666, 30px 0px 0px #666, 45px 0px 0px #666, 75px 0px 0px #666, 90px 0px 0px #666, 105px 0px 0px #666, 120px 0px 0px #666, 135px 0px 0px #666, 150px 0px 0px #666, 165px 0px 0px #666, 195px 0px 0px #666, 210px 0px 0px #666, 225px 0px 0px #666, 240px 0px 0px #666; -webkit-transform: rotate(1deg); transform: rotate(1deg); } .plane .frame .door { position: absolute; top: 17px; left: 75px; width: 10px; height: 14px; border: 1px solid #333; } .plane .brand { position: absolute; top: 38px; right: 58px; color: #ef7b57; font-size: 13px; font-weight: 600; -webkit-transform: rotate(1deg); transform: rotate(1deg); } .plane .frame .pilothouse { position: absolute; top: 26px; right: 13px; width: 7px; height: 10px; background: #666; z-index: 5; } .plane .frame .pilothouse::after { content: ""; position: absolute; top: 0px; left: 10px; width: 10px; height: 9px; background: #666; z-index: 5; border-bottom-right-radius: 100%; } .plane .tube { width: 40px; height: 20px; border: 1px solid #000; position: absolute; border-radius: 15% 0% 0% 25%; border-left: none; -webkit-transform: skewX(5deg); transform: skewX(5deg); } .plane .tube::after { content: ""; width: 8px; height: 20px; position: absolute; top: -1px; right: -5px; border-radius: 5% 28% 47% 5%;

} .plane .tube-a { top: 24px; left: 202px; } .plane .tube-b { top: 60px; left: 238px; } .plane .tube-c { top: 175px; left: 258px; z-index: 3; } .plane .tube-d { top: 218px; left: 245px; z-index: 3; } .plane .tube .cover { width: 26px; height: 8px; background: #fff; position: absolute; border-top: 1px solid #000; border-right: 1px solid #000; border-radius: 0% 50% 0% 0%; -webkit-transform: rotate(7deg); transform: rotate(7deg); left: 0; top: 13px; } .plane .tube-a .cover, .plane .tube-b .cover { width: 34px; height: 14px; border-right: none; } .plane .tube-c .cover { left: 1px;

} .plane .wrings-left { width: 140px; height: 39px; transform-origin: right top; -webkit-transform: rotate(45deg) skewX(-43deg); transform: rotate(45deg) skewX(-43deg); border-top-left-radius: 10%; border-bottom-left-radius: 10%; /*border-right:none;*/ position: absolute; top: 105px; left: 155px; } .plane .wrings-left::after { content: ""; width: 147px; height: 30px; position: absolute; top: 21px; left: -2px; -webkit-transform: rotate(10deg) skewX(10deg); transform: rotate(10deg) skewX(10deg); border-top: none; border-radius: 0% 0% 0% 10%; } .plane .wrings-right { width: 145px; height: 55px; transform-origin: right top; -webkit-transform: rotate(-72deg) skewX(23deg); transform: rotate(-72deg) skewX(23deg); border-top-left-radius: 10%; border-bottom-left-radius: 10%; border-bottom-right-radius: 5%; position: absolute; top: 145px; left: 97px; z-index: 3; } .plane .wrings-right::after { content: ""; width: 147px; height: 40px; position: absolute; top: -12px; left: -2px; -webkit-transform: rotate(-10deg) skewX(-10deg); transform: rotate(-10deg) skewX(-10deg); border-bottom: none; border-radius: 10% 5% 0% 0%; } .plane .wrings-left p, .plane .wrings-left p::after, .plane .wrings-right p, .plane .wrings-right p::after { height: 8px; position: absolute; border: 1px solid #aaa; } .plane .wrings-left p { width: 50px; top: 47px; left: 70px; -webkit-transform: rotate(10deg) skewX(10deg); transform: rotate(10deg) skewX(10deg); z-index: 1; border-bottom: none; } .plane .wrings-left p::after { content: ""; width: 46px; top: 0px; left: -58px; border-bottom: none; } .plane .wrings-right p { width: 50px; top: -16px; left: 76px; -webkit-transform: rotate(-10deg) skewX(-10deg); transform: rotate(-10deg) skewX(-10deg); z-index: 1; border-top: none; } .plane .wrings-right p::after { content: ""; width: 49px; top: 0px; left: -60px; border-top: none; } .plane .tail-left, .plane .tail-right { transform-origin: right top; border-top-left-radius: 10%; border-bottom-left-radius: 10%; position: absolute; } .plane .tail-left { width: 50px; height: 35px; -webkit-transform: rotate(45deg) skewX(-43deg); transform: rotate(45deg) skewX(-43deg); border-right: none; top: 143px; left: 42px; } .plane .tail-right { width: 45px; height: 30px; -webkit-transform: rotate(-75deg) skewX(20deg); transform: rotate(-75deg) skewX(20deg); border-bottom-right-radius: 5%; top: 138px; left: -13px; z-index: 4; } .plane .tail-top { width: 60px; height: 25px; -webkit-transform: rotate(50deg) skewX(-30deg); transform: rotate(50deg) skewX(-30deg); border-top-left-radius: 20%; border-bottom-left-radius: 20%; position: absolute; top: 96px; left: 12px; border-bottom: none; z-index: 3; } .plane .tail-top::before { content: ""; width: 60px; height: 20px; position: absolute; top: 9px; left: 1px; border-bottom: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(13deg) skewX(13deg); transform: rotate(13deg) skewX(13deg); background: #fff; } .plane .tail-top::after { content: ""; width: 50px; height: 40px; border-width: 2px; width: 15px; height: 41px; border-width: 2px; border-top-right-radius: 50%; border-bottom-right-radius: 28%; -webkit-transform: skewX(24deg); transform: skewX(24deg); position: absolute; top: -42px; left: 38px; border-right: 0; border-top: 0; border-left: 0; background: transparent; } .plane .tail-top .paint, .plane .tail-top .paint::before { position: absolute; top: 0px; background: rgba(197, 35, 7, .9); } .plane .tail-top .paint { width: 67px; height: 23px; left: 0px; z-index: 5; border-radius: 15% 0% 0% 10%; } .plane .tail-top .paint::before { content: ""; width: 31px; height: 37px; left: 64px; border-radius: 0% 0% 400% 0%; -webkit-transform: rotate(8deg) skewY(-8deg); transform: rotate(8deg) skewY(-8deg); } .plane .tail-top .paint p { color: #fff; padding-left: 13px; padding-top: 1px; font-size: 16px; }

AIRBUS

pohjp