css实现三维飞机空中飞行动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：css实现三维飞机空中飞行动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
}
.cuboid__side:nth-of-type(1) {
  height: calc(var(--thickness) * 1vmin);
  width: 100%;
  position: absolute;
  top: 0;
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  width: 100%;
  height: calc(var(--thickness) * 1vmin);
  position: absolute;
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  height: 100%;
  width: calc(var(--thickness) * 1vmin);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
  position: absolute;
  top: 0;
  left: 0;
}
.cuboid__side:nth-of-type(6) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}
*,
*:after,
*:before {
  box-sizing: border-box;
  transform-style: preserve-3d;
  transition: background 0.25s;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  overflow: hidden;
}
:root {
  --dark: 0;
  --base-size: 20;
  --plane-height: calc(var(--base-size) * 1vmin);
  --plane-width: calc(var(--plane-height) * 1.6);
  --white-one: hsl(0, 0%, calc((90 - (var(--dark) * 30)) * 1%));
  --white-two: hsl(0, 0%, calc((85 - (var(--dark) * 30)) * 1%));
  --white-three: hsl(0, 0%, calc((80 - (var(--dark) * 30)) * 1%));
  --white-four: hsl(0, 0%, calc((75 - (var(--dark) * 30)) * 1%));
  --white-five: hsl(0, 0%, calc((70 - (var(--dark) * 30)) * 1%));
  --accent-hue: 10;
  --accent-one: hsl(var(--accent-hue), 80%, calc((60 - (var(--dark) * 20)) * 1%));
  --accent-two: hsl(var(--accent-hue), 80%, calc((55 - (var(--dark) * 20)) * 1%));
  --accent-three: hsl(var(--accent-hue), 80%, calc((50 - (var(--dark) * 20)) * 1%));
  --accent-four: hsl(var(--accent-hue), 80%, calc((45 - (var(--dark) * 20)) * 1%));
  --accent-five: hsl(var(--accent-hue), 80%, calc((40 - (var(--dark) * 20)) * 1%));
  --screen: hsla(210, 80%, calc((70 - (var(--dark) * 20)) * 1%), 0.25);
  --metal-one: hsl(0, 0%, calc((60 - (var(--dark) * 20)) * 1%));
  --metal-two: hsl(0, 0%, calc((50 - (var(--dark) * 20)) * 1%));
  --metal-three: hsl(0, 0%, calc((40 - (var(--dark) * 20)) * 1%));
  --wheel-one: #1a1a1a;
  --wheel-two: #0d0d0d;
  --wheel-three: #000;
  --wheel-hub: hsl(0, 0%, calc((98 - (var(--dark) * 20)) * 1%));
  --bg: hsl(210, 80%, calc((90 - (var(--dark) * 76)) * 1%));
  --night: #082949;
  --cloud-one: hsl(0, 0%, calc((98 - (var(--dark) * 35)) * 1%));
  --cloud-two: hsl(0, 0%, calc((94 - (var(--dark) * 35)) * 1%));
  --cloud-three: hsl(0, 0%, calc((90 - (var(--dark) * 35)) * 1%));
  --cloud-four: hsl(0, 0%, calc((86 - (var(--dark) * 35)) * 1%));
  --cloud-five: hsl(0, 0%, calc((82 - (var(--dark) * 35)) * 1%));
  --cloud-six: hsl(0, 0%, calc((78 - (var(--dark) * 35)) * 1%));
}
.scene {
  transform: translate(-50%, -50%);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg));
}
.plane {
  height: var(--plane-height);
  width: var(--plane-width);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: roll 10s infinite ease-out alternate;
          animation: roll 10s infinite ease-out alternate;
}
.plane__floater {
  position: absolute;
  width: var(--plane-width);
  height: var(--plane-width);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  -webkit-animation: float 2s infinite ease-in-out;
          animation: float 2s infinite ease-in-out;
}
.plane__looper {
  position: absolute;
  width: var(--plane-width);
  height: var(--plane-width);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  transform-origin: 50% 0;
  -webkit-animation: loop 10s infinite ease-in-out;
          animation: loop 10s infinite ease-in-out;
}
.plane * {
  position: absolute;
}
.plane__body {
  height: 40%;
  width: 36%;
  bottom: 20%;
  left: 10%;
}
.plane__wheels {
  bottom: 0;
  width: calc(var(--plane-height) * 0.2);
  left: 32%;
  transform: translate(-50%, 0);
  height: 20%;
}
.plane__axle {
  height: 50%;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.plane__wheel {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.plane__wings {
  height: 70%;
  width: 40%;
  bottom: 19%;
  left: 12%;
}
.plane__tail {
  height: 40%;
  width: 54%;
  bottom: 20%;
  left: 46%;
}
.plane__nose {
  height: 30%;
  width: 10%;
  bottom: 25%;
}
.plane__stabilizer--horizontal {
  height: 9%;
  width: 16%;
  right: 1%;
  bottom: 50%;
}
.plane__screen {
  bottom: 60%;
  left: 30%;
  width: 6%;
  height: 14%;
}
.plane__propellor {
  height: calc(var(--base-size) * 0.75vmin);
  width: calc(var(--base-size) * 0.75vmin);
  left: -1%;
  bottom: 40%;
  transform: translate(-50%, 50%) rotateY(-90deg);
}
.plane__propellor:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 2px);
  height: 16%;
  width: 16%;
  border-radius: 50%;
  background: var(--white-one);
}
.plane__.........完整代码请登录后点击上方下载按钮下载查看