1 line
8.6 KiB
CSS
1 line
8.6 KiB
CSS
.plane-bg{bottom:0;left:50%;position:absolute;right:0;top:0}@keyframes airplane-wrap-anim{0%{transform:rotateX(0deg) rotateY(-5deg) rotate(0deg)}40%{transform:rotateX(0deg) rotateY(-10deg) rotate(0deg)}60%{transform:rotateX(5deg) rotateY(15deg) rotate(-18deg)}80%{transform:rotateX(2deg) rotateY(5deg) rotate(-10deg)}to{transform:rotateX(0deg) rotateY(-5deg) rotate(0deg)}}@keyframes airplane{0%{transform:rotateY(-17deg) rotate(21deg) rotateX(-23deg) translateX(0)}25%{transform:rotateY(-13deg) rotate(13deg) rotateX(-19deg) translateX(100px)}50%{transform:rotateY(-10deg) rotate(19deg) rotateX(-15deg) translateX(-70px)}75%{transform:rotateY(-13deg) rotate(13deg) rotateX(-19deg) translateX(40px)}to{transform:rotateY(-17deg) rotate(21deg) rotateX(-23deg) translateX(0)}}@keyframes airplane-pos-anim{0%{left:50%}40%{left:40%}70%{left:70%}to{left:50%}}@keyframes propeller{0%{transform:translate3d(50px,60px,300px) rotate(0deg)}to{transform:translate3d(50px,60px,300px) rotate(-1turn)}}.plane-bg .airplane-wrap{animation-duration:16s;animation-iteration-count:infinite;animation-name:airplane-wrap-anim;animation-timing-function:ease-in-out;height:100%;transform:rotateX(0deg) rotateY(-5deg) rotate(0deg);transform-style:preserve-3d;width:100%;z-index:3}.plane-bg .airplane{animation-duration:16s;animation-iteration-count:infinite;animation-name:airplane,airplane-pos-anim;animation-timing-function:ease-in-out;right:50%;top:36%;transform:rotateY(-17deg) rotate(21deg) rotateX(-23deg) translateX(0)}.plane-bg .airplane,.plane-bg .grp{position:absolute;transform-style:preserve-3d}.plane-bg .grp{transform-origin:center;width:0}.plane-bg .bordered{border:2px solid rgba(96,138,177,.7);position:absolute}.plane-bg .bordered-thin{border:1px solid rgba(96,138,177,.7);position:absolute}.plane-bg .plate{border:2px solid rgba(96,138,177,.7)}.plane-bg .plate,.plane-bg .plate-no-border{background-color:transparent;position:absolute}.plane-bg .front-cover{transform:translateZ(250px)}.plane-bg .front-cover>div{transform-origin:bottom}.plane-bg .front-cover-inner{height:80px;transform:translate3d(0,20px,0);width:100px}.plane-bg .front-cover-center{height:50px;transform:translate3d(20px,35px,45px);width:60px}.plane-bg .trapezoid{border-bottom-color:transparent;border-bottom-style:solid;position:absolute}.plane-bg .front-cover-top{transform:translate3d(0,-24px,2px) rotateX(-108deg)}.plane-bg .front-cover-bottom,.plane-bg .front-cover-top{border-bottom-width:45px;border-left:21px solid transparent;border-right:21px solid transparent;height:0;width:60px}.plane-bg .front-cover-bottom{transform:translate3d(0,57px,2px) rotateX(-72deg)}.plane-bg .front-cover-left{transform:translate3d(62px,14px,0) rotateX(0deg) rotateY(68deg) rotate(-90deg)}.plane-bg .front-cover-left,.plane-bg .front-cover-right{border-bottom-width:48px;border-left:14px solid transparent;border-right:14px solid transparent;height:0;width:53px}.plane-bg .front-cover-right{transform:translate3d(-38px,14px,0) rotateX(0deg) rotateY(112deg) rotate(-90deg)}.plane-bg .front-cover-top-left{height:0;transform:translate3d(68px,27px,24px) rotateY(63deg) rotate(-18deg) rotateX(45deg);width:48px}.plane-bg .front-cover-top-right{height:0;transform:translate3d(-15px,27px,24px) rotateY(118deg) rotate(-18deg) rotateX(-45deg);width:48px}.plane-bg .front-cover-bottom-left{height:0;transform:translate3d(67px,94px,24px) rotateY(64deg) rotate(17deg) rotateX(-45deg);width:48px}.plane-bg .front-cover-bottom-right{height:0;transform:translate3d(-13px,94px,24px) rotateY(115deg) rotate(16deg) rotateX(45deg);width:48px}.plane-bg .left-cover{height:80px;transform:rotateY(90deg) translate3d(0,20px,-148px);width:500px}.plane-bg .right-cover{height:80px;transform:rotateY(90deg) translate3d(0,20px,-252px);width:500px}.plane-bg .top-cover-front{height:100px;transform:rotateY(90deg) rotateX(90deg) translate3d(-162px,-38px,30px);width:175px}.plane-bg .top-cover-back{height:100px;transform:rotateY(90deg) rotateX(90deg) translate3d(160px,-40px,31px);width:180px}.plane-bg .roof{height:100px;transform:rotateY(90deg) rotateX(90deg) translate3d(4px,0,94px);width:100px}.plane-bg .front-window{height:65px;transform:rotateX(23deg) translate3d(0,-17px,74px);width:100px}.plane-bg .window-fill{background-color:transparent}.plane-bg .window{border-bottom:60px solid transparent;border-left:25px solid transparent;border-right:10px solid transparent;height:0;position:absolute;width:100px}.plane-bg .left-window{transform:rotateY(90deg) translate3d(-5px,-40px,35px)}.plane-bg .right-window{transform:rotateY(90deg) translate3d(-5px,-40px,-65px)}.plane-bg .rear-window{height:62px;transform:rotateX(-11deg) translate3d(0,-30px,-69px);width:100px}.plane-bg .bottom-cover{height:100px;transform:rotateY(90deg) rotateX(90deg) translate3d(0,-200px,-50px);width:500px}.plane-bg .back-cover{height:80px;transform:translate3d(0,20px,-250px);width:100px}.plane-bg .top-tail{transform:translate3d(0,14px,-190px)}.plane-bg .left-tail{transform:translate3d(2px,-100px,-190px) rotate(90deg)}.plane-bg .right-tail{transform:translate3d(102px,4px,-190px) rotate(-90deg)}.plane-bg .tail-top{height:10px;transform:rotateY(90deg) rotateX(90deg) translate3d(55px,20px,80px);width:60px}.plane-bg .tail-front{height:110px;transform:rotateX(45deg) translate3d(45px,-53px,75px);width:10px}.plane-bg .tail-back{height:82px;transform:rotateX(21deg) translate3d(45px,-96px,-39px);width:10px}.plane-bg .tail-left-rect{height:30px;transform:rotateY(90deg) rotate(90deg) translate3d(-48px,-39px,19px);width:77px}.plane-bg .tail-right-rect{height:30px;transform:rotateY(90deg) rotate(90deg) translate3d(-158px,-39px,9px);width:77px}.plane-bg .triangle{border-left-color:transparent;border-left-style:solid;border-top-color:transparent;border-top-style:solid;height:0;width:0}.plane-bg .tail-triangle-left-bottom{border-left-width:80px;border-top-width:80px;transform:rotateY(90deg) rotate(90deg) translate3d(-74px,14px,18px)}.plane-bg .tail-triangle-left-top{border-left-width:80px;border-top-width:30px;transform:rotateY(90deg) rotate(-90deg) translate3d(126px,68px,18px)}.plane-bg .tail-triangle-right-bottom{border-left-width:80px;border-top-width:80px;transform:rotateY(90deg) rotate(90deg) translate3d(-182px,12px,8px)}.plane-bg .tail-triangle-right-top{border-left-width:80px;border-top-width:30px;transform:rotateY(90deg) rotate(-90deg) translate3d(236px,70px,9px)}.plane-bg .tail-connector{height:12px;transform:rotateY(90deg) rotateX(90deg) translate3d(1px,-6px,222px);width:112px}.plane-bg .wing{border-bottom-left-radius:50%;border-bottom-right-radius:50%;border-top-left-radius:20%;border-top-right-radius:20%;border-width:5px;height:200px;transform:rotateX(90deg) translate3d(-300px,70px,30px);width:700px}.plane-bg .wing-right{border-bottom-left-radius:90%;border-bottom-right-radius:0;border-top-left-radius:35%;border-top-right-radius:0;border-width:5px 1px 5px 5px;height:200px;width:293px}.plane-bg .wing-left{border-bottom-left-radius:0;border-bottom-right-radius:90%;border-top-left-radius:0;border-top-right-radius:35%;border-width:5px 5px 5px 1px;height:200px;transform:translate3d(405px,0,0);width:293px}.plane-bg .wing-right.bottom,.plane-bg .wing.bottom{transform:translateZ(-4px)}.plane-bg .wing-left.bottom{transform:translate3d(405px,0,-4px)}.plane-bg .conector{height:2px;width:208px}.plane-bg .conector.right{transform:rotateX(90deg) rotateY(90deg) translate3d(102px,-2px,193px)}.plane-bg .conector.left{transform:rotateX(90deg) rotateY(90deg) translate3d(102px,-2px,301px)}.plane-bg .propeller{height:0;transform:translate3d(50px,60px,300px) rotate(0deg);transform-origin:1px 1px;width:0}.plane-bg .propeller-center{webkit-border-radius:50%;border-radius:50%;height:18px;transform:translate3d(-10px,-10px,0);width:18px}.plane-bg .propeller-center.top{transform:translate3d(-10px,-10px,4px)}.plane-bg .p-w{border-bottom-left-radius:11%;border-bottom-right-radius:100%;border-top-left-radius:90%;border-top-right-radius:18%;border-width:3px;height:70px;width:25px}.plane-bg .propeller-wing-1{transform:translate3d(34px,-33px,0) rotate(90deg)}.plane-bg .propeller-wing-2{transform:translate3d(-20px,12px,0) rotate(180deg)}.plane-bg .propeller-wing-3{transform:translate3d(-63px,-40px,0) rotate(270deg)}.plane-bg .propeller-wing-4{transform:translate3d(-9px,-86px,0) rotate(0deg)}.plane-bg .propeller-wing-5{transform:translate3d(34px,-33px,4px) rotate(90deg)}.plane-bg .propeller-wing-6{transform:translate3d(-20px,12px,4px) rotate(180deg)}.plane-bg .propeller-wing-7{transform:translate3d(-63px,-40px,4px) rotate(270deg)}.plane-bg .propeller-wing-8{transform:translate3d(-9px,-86px,4px) rotate(0deg)}.plane-bg .rotate-propeller{animation-duration:.8s;animation-iteration-count:infinite;animation-name:propeller;animation-timing-function:linear} |