css布局实现公路飞机飞行动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现公路飞机飞行动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { overflow: hidden; margin: 0; height: 100vh; width: 100vw; perspective: 1400px; background: #EBF5FB; } body div { transform-style: preserve-3d; position: absolute; } .camera { height: 100%; width: 100%; transform-origin: center; transform: translateY(10vmin) rotateX(75deg) rotateZ(10deg) translateZ(-5vmin) translateY(-60vmin); } .pseudo { content: ''; position: absolute; } .cessna { offset-path: path('M 0 0 L 0 -900 A 9 9 90 0 1 900 -900 a 450 450 90 0 1 -450 450 L -450 -450 A 9 9 90 0 0 -450 450 a 450 450 90 0 0 450 -450'); top: 50%; left: 50%; transform: rotateX(-90deg); animation: move 8s infinite linear; } @keyframes move { 0% { offset-distance: 0%; transform: rotateX(-90deg); } 5% { offset-distance: 5%; transform: rotateX(-90deg); } 10% { offset-distance: 10%; transform: rotateX(-90deg); } 15% { offset-distance: 15%; transform: rotateX(-90deg); } 20% { offset-distance: 20%; transform: rotateX(-135deg); } 25% { offset-distance: 25%; transform: rotateX(-160deg); } 30% { offset-distance: 30%; transform: rotateX(-160deg); } 35% { offset-distance: 35%; transform: rotateX(-160deg); } 40% { offset-distance: 40%; transform: rotateX(-160deg); } 45% { offset-distance: 45%; transform: rotateX(-135deg); } 50% { offset-distance: 50%; transform: rotateX(-90deg) translateY(-15vmin) rotateZ(-10deg); } 55% { offset-distance: 55%; transform: rotateX(-90deg) translateY(-15vmin) rotateZ(-10deg); } 60% { offset-distance: 60%; transform: rotateX(-90deg) translateY(-15vmin); } 65% { offset-distance: 65%; transform: rotateX(-45deg) translateY(-15vmin); } 70% { offset-distance: 70%; transform: rotateX(-20deg) translateY(-15vmin); } 75% { offset-distance: 75%; transform: rotateX(-20deg) translateY(-15vmin); } 80% { offset-distance: 80%; transform: rotateX(-20deg) translateY(-15vmin); } 85% { offset-distance: 85%; transform: rotateX(-20deg) translateY(-15vmin); } 90% { offset-distance: 90%; transform: rotateX(-20deg) translateY(-10vmin); } 95% { offset-distance: 95%; transform: rotateX(-45deg) translateY(-5vmin); } 100% { offset-distance: 100%; transform: rotateX(-90deg); } } @media (min-width: 992px) { .cessna { offset-path: path('M 0 0 L 0 -1200 A 12 12 90 0 1 1200 -1200 a 600 600 90 0 1 -600 600 L -600 -600 A 12 12 90 0 0 -600 600 a 600 600 90 0 0 600 -600'); } } @keyframes left-flap-inner { 0% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } 5% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } 10% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } 15% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } 20% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(45deg); } 25% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 30% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 35% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 40% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 45% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(45deg); } 50% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 55% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 60% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } 65% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-45deg); } 70% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg); } 75% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg); } 80% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg); } 85% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg); } 90% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg); } 95% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-45deg); } 100% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } } @keyframes left-flap-outer { 0% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } 5% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } 10% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } 15% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } 20% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(20deg); } 25% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 30% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 35% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 40% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 45% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(20deg); } 50% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 55% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 60% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } 65% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-20deg); } 70% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg); } 75% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg); } 80% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg); } 85% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg); } 90% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg); } 95% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-20deg); } 100% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } } @keyframes right-flap-inner { 0% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } 5% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } 10% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } 15% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } 20% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-45deg); } 25% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg); } 30% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg); } 35% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg); } 40% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-60deg); } 45% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(-45deg); } 50% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 55% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 60% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } 65% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(45deg); } 70% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 75% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 80% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 85% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 90% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(60deg); } 95% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(45deg); } 100% { transform: translate3d(1.77667vmin, -6.8vmin, -5.525vmin) rotateX(-90deg) rotateY(0); } } @keyframes right-flap-outer { 0% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } 5% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } 10% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } 15% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } 20% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-20deg); } 25% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg); } 30% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg); } 35% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg); } 40% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-45deg); } 45% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(-20deg); } 50% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 55% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 60% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } 65% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(20deg); } 70% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 75% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 80% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 85% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 90% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(45deg); } 95% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(20deg); } 100% { transform: translate3d(1.77667vmin, -6.8vmin, -25.5vmin) rotateX(-90deg) skewX(7.66965542deg) rotateY(0); } } .fuselage .fuselage__side > div:nth-child(1) { width: 30.668vmin; height: 4.216vmin; transform-origin: right center; transform: translate3d(-34.85vmin, -0.8432vmin, 4.248725vmin) rotateY(-7.96333679deg); background: #b0b8c0; } .fuselage .fuselage__side > div:nth-child(1):before { content: ''; position: absolute; width: 0; height: 0; border-top: 0; border-bottom: 1.768vmin solid #b0b8c0; border-left: 30.668vmin solid transparent; border-right: 0; transform: translate(0, -1.768vmin); } .fuselage .fuselage__side > div:nth-child(1):after { content: ''; position: absolute; width: 0; height: 0; border-top: 2.584vmin solid #b0b8c0; border-bottom: 0; border-left: 30.668vmin solid transparent; border-right: 0; transform: translate(0, 4.216vmin); } .fuselage .fuselage__side > div:nth-child(2) { width: 9.42659758vmin; height: 8.568vmin; transform-origin: right center; transform: translate3d(-4.26879758vmin, -2.6112vmin, 5.525vmin) rotateY(-7.78122387deg); background: #9ca6b0; } .fuselage .fuselage__side > div:nth-child(2):before { content: ''; position: absolute; width: 0; height: 0; border-top: 0; border-bottom: 4.216vmin solid #96a1ac; border-left: 9.42659758vmin solid transparent; border-right: 0; transform: translate(0, -4.216vmin); } .fuselage .fuselage__side > div:nth-child(2):after { content: ''; position: absolute; width: 0; height: 0; border-top: 0.816vmin solid #96a1ac; border-bottom: 0; border-left: 9.42659758vmin solid transparent; border-right: 0; transform: translate(0, 8.568vmin); } .fuselage .fuselage__side > div:nth-child(3) { width: 11.9187vmin; height: 13.6vmin; transform: translate3d(5.1578vmin, -6.8vmin, 5.525vmin); background: #9ca6b0; } .fuselage .fuselage__side > div:nth-child(4) { width: 4.182vmin; height: 11.016vmin; transform: translate3d(17.0765vmin, -4.216vmin, 5.525vmin); background: #9ca6b0; } .fuselage .fuselage__side > div:nth-child(4):before { content: ''; position: absolute; width: 0; height: 0; border-top: 0; border-bottom: 2.584vmin solid #909ca7; border-left: 0; border-right: 4.182vmin solid transparent; transform: translate(0, -2.584vmin); } .fuselage .fuselage__side > div:nth-child(5) { width: 13.50470242vmin; height: 4.216vmin; transform-origin: bottom left; transform: translate3d(21.2585vmin, -2.584vmin, 5.525vmin) rotateY(10deg); background: #a1abb5; } .fuselage .fuselage__side > div:nth-child(5):before { content: ''; position: absolute; width: 0; height: 0; border-top: 0; border-bottom: 1.632vmin solid #a1abb5; border-left: 0; border-right: 13.50470242vmin solid transparent; transform: translate(0, -1.632vmin); } .fuselage .fuselage__side > div:nth-child(5):after { content: ''; position: absolute; width: 0; height: 0; border-top: 5.168vmin solid #a1abb5; border-bottom: 0; border-left: 0; border-right: 13.50470242vmin solid transparent; transform: translate(0, 4.216vmin); } .fuselage .fuselage__side > div:nth-child(6) { width: 0; height: 0; border-top: 0; border-bottom: 1.292vmin solid #85929E; border-left: 6.75235121vmin solid transparent; border-right: 0; transform-origin: bottom left; transform: translate3d(21.2585vmin, 5.508vmin, 5.525vmin) rotateY(10deg) skewY(-10.83209591deg); } .fuselage .fuselage__side > div:nth-child(7) { width: 0; height: 0; border-top: 1.292vmin solid #85929E; border-bottom: 0; border-left: 0; border-right: 6.75235121vmin solid transparent; transform-origin: top left; transform: translate3d(21.2585vmin, 4.216vmin, 5.525vmin) rotateY(10deg) translateX(6.75235121vmin) skewY(-20.9409322deg); } .fuselage .fuselage__side > div:nth-child(8) { width: 0; height: 0; border-top: 4.248725vmin solid #bec5cb; border-bottom: 0; border-left: 30.4236813vmin solid transparent; border-right: 0; transform-origin: bottom right; transform: translate3d(-34.6056813vmin, -6.859925vmin, 4.248725vmin) rotateX(90deg) rotateY(-3.33148628deg); } .fuselage .fuselage__side > div:nth-child(9) { width: 10.24726891vmin; height: 4.248725vmin; transform-origin: bottom left; transform: translate3d(-4.182vmin, -6.859925vmin, 4.248725vmin) rotateX(90deg) rotateY(-24.29449792deg); background: #adb6be; } .fuselage .fuselage__side > div:nth-child(9):before { content: ''; position: absolute; width: 0; height: 0; border-top: 1.276275vmin solid #adb6be; border-bottom: 0; border-left: 10.24726891vmin solid transparent; border-right: 0; transform: translate3d(0, 4.248725vmin, 0); } .fuselage .fuselage__side > div:nth-child(10) { width: 11.9187vmin; height: 5.525vmin; transform-origin: top left; transform: translate3d(5.1578vmin, -6.8vmin, 5.525vmin) rotateX(-90deg); background: #c9cfd4; } .fuselage .fuselage__side > div:nth-child(11) { width: 4.9159109vmin; height: 5.525vmin; transform-origin: bottom left; transform: translate3d(17.0765vmin, -12.325vmin, 5.525vmin) rotateX(90deg) rotateY(31.7113572deg); background: #96a1ac; } .fuselage .fuselage__side > div:nth-child(11):before { content: ''; position: absolute; height: 90%; width: 80%; margin-left: 10%; background: #404040; } .fuselage .fuselage__side > div:nth-child(12) { width: 13.39929373vmin; height: 3.17993303vmin; transform-origin: top left; transform: translate3d(21.2585vmin, -4.216vmin, 0vmin) rotateX(90deg) rotateY(6.99585322deg); background: #b2bbc2; } .fuselage .fuselage__side > div:nth-child(12):before { content: ''; position: absolute; width: 0; height: 0; border-top: 2.34506697vmin solid #b2bbc2; border-bottom: 0; border-left: 0; border-right: 13.39929373vmin solid transparent; transform: translateY(3.17993303vmin); } .fuselage .fuselage__side > div:nth-child(13) { width: 3.17993303; height: 4.216; transform-origin: left center; transform: translate3d(34.55803565vmin, -2.584vmin, 3.17993303vmin) rotateY(90deg); background: #b2bbc2; } .fuselage .fuselage__side > div:nth-child(14) { width: 6.77411811vmin; height: 4.35246652vmin; transform-origin: top left; transform: translate3d(21.2585vmin, 6.8vmin, 4.35246652vmin) rotateX(-90deg) rotateY(10.99515581deg); background: #6a7986; } .fuselage .fuselage__side > div:nth-child(14):before { content: ''; position: absolute; width: 0; height: 0; border-top: 0; border-bottom: 1.17253348vmin solid #6a7986; border-left: 0; border-right: 6.77411811vmin solid transparent; transform: translateY(-1.17253348vmin); } .fuselage .fuselage__side > div:nth-child(15) { width: 7.69693368vmin; height: 3.17993303vmin; transform-origin: top left; transform: translate3d(27.90826782vmin, 5.508vmin, 3.17993303vmin) rotateX(-90deg) rotateY(30.23695732deg); background: #778593; } .fuselage .fuselage__side > div:nth-child(15):before { content: ''; position: absolute; width: 0; height: 0; border-top: 0; border-bottom: 1.17253348vmin solid #778593; border-left: 0; border-right: 7.69693368vmin solid transparent; tr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0