通过键盘上下左右键组合控制飞机特技表演飞行动画效果代码-html代码-BFW代码库

通过键盘上下左右键组合控制飞机特技表演飞行动画效果代码

代码语言：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) translate.........完整代码请登录后点击上方下载按钮下载查看