css布局实现公路飞机飞行动画效果代码-html代码-BFW代码库

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