通过键盘上下左右键组合控制飞机特技表演飞行动画效果代码
代码语言:html
所属分类:动画
代码描述:通过键盘上下左右键组合控制飞机特技表演飞行动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { padding:0; margin:0; } html { background:#222; font-family:monospace; font-size:16px; color:white; } #container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow:hidden; } /* Pilot Game */ #pilotGame { position:absolute; top:0; left:0; right:0; bottom:0; padding:50px; box-sizing:border-box; background-color: #52ACFF; background-image:linear-gradient(180deg, dodgerblue 12%, Khaki 90%, YellowGreen 90% ); display:grid; place-items:center; /* display:none; */ } details { position:fixed; top:1em; left:1em; } details > summary { font-weight:900; cursor:pointer; list-style:none; background:rgba(255,255,255,.1); width:fit-content; padding:.5em; border-radius:1em; opacity:.5; transition:.25s; } [open] > summary { opacity:1; } details p { margin-left:2em; } #outerPlane { position:absolute; width:50px; height:46px; top:50%; left:50%; transform:translate(-50%, -50%); } #plane { width:50px; height:25px; border-radius:15%; border-bottom-left-radius:75%; border-top-left-radius:0%; border:2px solid white; position:absolute; background-color:transparent; z-index:1; transform-origin:center center; top:0; left:0; } .flightBob { animation:flightBob 2s linear infinite; } @keyframes flightBob{ 25% { top:-10px; } 50% { top:0px; } 75% { top:10px; } 100% { top:0px; } } .loop { animation:loop 1.25s linear forwards; transform-origin:center -150px !important; } @keyframes loop { 100% { transform: rotateZ(-360deg); } } .roll { transform-origin:center center; animation:roll 1.25s linear forwards; } @keyframes roll { 25% { transform: scale(.875) translateY(-150px) rotateX(-90deg); } 50% { transform: scale(.75) translateY(0px) rotateX(-180deg); } 75% { transform: scale(.875) translateY(150px) rotateX(-270deg); } 100% { transform: scale(1) translateY(0px) rotateX(-360deg); } } .dblFlip { transform-origin:center center; animation:dblFlip 1.25s linear forwards; } @keyframes dblFlip { 100% { transform: rotateZ(-720deg); } } .circle { transform-origin:center center; animation:circle 1.25s linear forwards; } @keyframes circle { 25% { transform: scale(.875) translateX(150px) rotateY(-90deg); } 50% { transform: scale(.75) translateX(0px) rotateY(-180deg); } 75% { transform: scale(.875) translateX(-150px) rotateY(-270deg); } 100% { transform: scale(1) translateX(0px) rotateY(-360deg); } } #plane.dblFlip.circle { transform-origin:center center; animation:leftRight 1.25s linear forwards !important; } @keyframes leftRight { 25% { transform: scale(.875) translateX(150px) rotateY(-90deg) rotateZ(-180deg); } 50% { transform: scale(.75) translateX(0px) rotateY(-180deg) rotateZ(-360deg); } 75% { transform: scale(.875) translateX(-150px) rotateY(-270deg) rotateZ(-540deg); } 100% { transform: scale(1) translateX(0px) rotateY(-360deg) rotateZ(-720deg); } } #plane.roll.loop { transform-origin:0 -150px !important; animation:upDown 1.25s linear forwards !important; } @keyframes upDown { 100% {transform: rotateZ(-360deg) rotateY(-720deg);} } #plane.roll.dblFlip { transform-origin:center center; animation:leftDown 1.25s linear forwards !important; } @keyframes leftDown { 25% { transform: scale(.875) translateY(-150px) rotateZ(-180deg) rotateX(-90deg); } 50% { transform: scale(.75) translateY(0px) rotateZ(-360deg) rotateX(-180deg); } 75% { transform: scale(.875) translateY(150px) rotateZ(-540deg) rotateX(-270deg); } 100% { transform: scale(1) translateY(0px) rotateZ(-720deg) rotateX(-360deg); } } #plane.loop.circle { transform-origin:center center !important; animation:upRight 1.25s linear forwards !important; } @keyframes upRight { 10% { transform: rotateZ(-90deg) ; } 25% { transform: rotateZ(-90deg) rotateX(-360deg); } 75% { transform: rotateZ(-90deg) rotateX(360deg) ; } 100% { transform: rotateZ(0deg) ; } } #plane.roll.circle { transform-origin:center center !important; animation:downRight 1.25s linear forwards !important; } @keyframes downRight { 50% { left:101vw; } 50.1% { left:-101vw; } 100% { left:0vw; } } #plane:before { content:''; position:absolute; width:10px; height:6px; display:block; border:2px solid white; top:-10px; left:-2px; border-top-left-radius:25%; border-top-right-radius:75%; z-index:-1; background-color:transparent; } #plane:after { content:''; position:absolute; width:5px; height:10px; display:block; border:2px solid white; top:3px; left:50px; border-radius:15%; border-top-right-radius:50%; border-bottom-right-radius:50%; background-color:transpa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0