<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>战斗机出击</title>
<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;
touch-action: none;
}
: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%);
}
.plane__floater {
position: absolute;
width: var(--plane-width);
height: var(--plane-width);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.plane__looper {
position: absolute;
width: var(--plane-width);
height: var(--plane-width);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
transform-origin: 50% 0;
}
.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__stabilizer--vertical {
height: 20%;
width: 20%;
right: 0;
bottom: 60%;
}
.plane__beacon {
right: 1%;
bottom: 80%;
height: 2%;
width: 2%;
}
.plane__wheel--left {
transform: translate3d(0, 0, calc(var(--base-size) * 0.3vmin));
}
.plane__wheel--right {
transform: translate3d(0, 0, calc(var(--base-size) * -0.3vmin));
}
.propellor {
height: 100%;
width: 100%;
}
.propellor:after,
.propellor:before {
content: '';
height: 100%;
width: 10%;
position: absolute;
top: 50%;
left: 50%;
background: linear-gradient(
transparent 0 5%,
var(--accent-two) 5% 15%,
transparent 15% 85%,
var(--accent-two) 85% 95%,
transparent 95%
), #000;
transform: translate(-50%, -50%) rotate(calc(var(--r, 45) * 1deg));
}
.propellor:after {
--r: -45;
}
.wings__ghost {
height: 80%;
width: 80%;
left: 50%;
bottom: 10%;
transform: translate(-50%, 0);
}
.wings__top {
top: 0;
height: 10%;
width: 100%;
left: 0;
}
.wings__bottom {
bottom: 0;
height: 10%;
width: 100%;
left: 0;
}
.wings__strobe {
bottom: 10%;
height: 4%;
width: 4%;
left: 50%;
}
.wings__strobe--left {
transform: translate3d(-50%, 0, calc(var(--base-size) * 1vmin));
}
.wings__strobe--right {
transform: translate3d(-50%, 0, calc(var(--base-size) * -1vmin));
}
.cloud {
height: 10vmin;
width: 15vmin;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cloud__shift {
height: 100%;
width: 100%;
}
.cloud__body {
height: 100%;
width: 100%;
}
.cloud__body > div {
position: absolute;
}
.cloud__body > div:nth-of-type(1) {
bottom: 0;
left: 25%;
width: 60%;
height: 90%;
--thickness: calc(var(--base-size) * 0.2);
}
.cloud__body > div:nth-of-type(2) {
bottom: 0;
left: 0;
width: 50%;
height: 60%;
--thickness: calc(var(--base-size) * 0.3);
}
.cloud__body > div:nth-of-type(3) {
bottom: 0;
right: 0%;
width: 60%;
height: 40%;
--thickness: calc(var(--base-size) * 0.4);
}
.cloud--one {
--speed: 2;
--delay: 3;
transform: translate(-50%, -50%) translate3d(-40vmin, 20vmin, 26vmin);
}
.cloud--two {
--speed: 4;
--delay: 1;
transform: translate(-50%, -50%) translate3d(30vmin, -15vmin, -34vmin);
}
.cloud--three {
--speed: 6;
--delay: 2;
transform: translate(-50%, -50%) translate3d(50vmin, 35vmin, -14vmin);
}
.cuboid--body {
--thickness: calc(var(--base-size) * 0.4);
}
.cuboid--body div {
background: var(--white-two);
}
.cuboid--body div:nth-of-type(1) {
background: var(--white-one);
}
.cuboid--body div:nth-of-type(2) {
background: var(--white-two);
}
.cuboid--body div:nth-of-type(3) {
background: var(--white-three);
}
.cuboid--body div:nth-of-type(4) {
background: var(--white-four);
}
.cuboid--body div:nth-of-type(5):after,
.cuboid--body div:nth-of-type(6):after {
content: '';
position: absolute;
top: 50%;
left: 50%;
height: calc(var(--base-size) * 0.25vmin);
width: calc(var(--base-size) * 0.25vmin);
background-image: url('https://assets.codepen.io/605876/avatar.png');
background-size: cover;
filter: saturate(0.65);
transform: translate3d(-50%, -50%, 1px);
}
.cuboid--screen {
--thickness: calc(var(--base-size) * 0.26);
}
.cuboid--screen div {
background: var(--screen);
}
.cuboid--tail {
--thickness: calc(var(--base-size) * 0.3);
}
.cuboid--tail div {
background: var(--white-two);
}
.cuboid--tail div:nth-of-type(1) {
background: var(--white-one);
}
.cuboid--tail div:nth-of-type(1):after {
content: '';
position: absolute;
height: 74%;
width: 50%;
background: var(--metal-three);
top: 50%;
right: 50%;
transform: translate3d(-50%, -50%, 1px);
}
.cuboid--tail div:nth-of-type(2) {
background: linear-gradient(var(--white-two) 0 30%, transparent 30%);
}
.cuboid--tail div:nth-of-type(3) {
background: linear-gradient(
90deg,
var(--white-two) 0 20%,
transparent 20%
);
}
.cuboid--tail div:nth-of-type(3):after {
content: '';
position: absolute;
background: var(--white-four);
top: 0%;
left: 20%;
height: 100%;
width: 87%;
transform-origin: 0 50%;
transform: rotateY(-22deg);
}
.cuboid--tail div:nth-of-type(5) {
background: transparent;
overflow: hidden;
}
.cuboid--tail div:nth-of-type(5):after {
content: '';
position: absolute;
bottom: 70%;
height: 100%;
width: 100%;
background: var(--white-two);
transform-origin: 100% 100%;
transform: rotate(-22deg) scale(2) translate(10%, 0);
}
.cuboid--tail div:nth-of-type(6) {
background: transparent;
overflow: hidden;
}
.cuboid--tail div:nth-of-type(6):after {
content: '';
position: absolute;
bottom: 70%;
height: 100%;
width: 100%;
background: var(--white-two);
transform-origin: 0% 100%;
transform: rotate(22deg) scale(2) translate(-10%, 0);
}
.cuboid--nose {
--thickness: calc(var(--base-size) * 0.3);
}
.cuboid--nose div {
background: var(--metal-three);
}
.cuboid--nose div:nth-of-type(1) {
background: var(--metal-one);
}
.cuboid--nose div:nth-of-type(2) {
background: var(--metal-two);
}
.cuboid--nose div:nth-of-type(3) {
background: var(--metal-one);
}
.cuboid--wings-ghost,
.cuboid--wings-top,
.cuboid--wings-bottom {
--thickness: calc(var(--base-size) * 2.2);
}
.cuboid--wings-ghost div,
.cuboid--wings-top div,
.cuboid--wings-bottom div {
background: var(--accent-one);
}
.cuboid--wings-ghost div:nth-of-type(1),
.cuboid--wings-top div:nth-of-type(1),
.cuboid--wings-bottom div:nth-of-type(1) {
background: var(--accent-two);
}
.cuboid--wings-ghost div:nth-of-type(2),
.cuboid--wings-top div:nth-of-type(2),
.cuboid--wings-bottom div:nth-of-type(2),
.cuboid--wings-ghost div:nth-of-type(5),
.cuboid--wings-top div:nth-of-type(5),
.cuboid--wings-bottom div:nth-of-type(5) {
background: var(--accent-three);
}
.cuboid--wings-ghost div:nth-of-type(4),
.cuboid--wings-top div:nth-of-type(4),
.cuboid--wings-bottom div:nth-of-type(4) {
background: var(--accent-four);
}
.cuboid--wings-ghost div:nth-of-type(3),
.cuboid--wings-top div:nth-of-type(3),
.cuboid--wings-bottom div:nth-of-type(3) {
background: var(--accent-five);
}
.cuboid--wings-ghost div:nth-of-type(3),
.cuboid--wings-ghost div:nth-of-type(5),
.cuboid--wings-ghost div:nth-of-type(6),
.cuboid--wings-ghost div:nth-of-type(1) {
background: transparent;
}
.cuboid--wings-ghost div:nth-of-type(2),
.cuboid--wings-ghost div:nth-of-type(4) {
background: linear-gradient(
90deg,
transparent 0 5%,
var(--metal-one) 5% 7%,
transparent 7% 33%,
var(--metal-one) 33% 35%,
transparent 35% 65%,
var(--metal-one) 65% 67%,
transparent 67% 93%,
var(--metal-one) 93% 95%,
transparent 95%
);
}
.cuboid--axle {
--thickness: calc(var(--base-size) * 0.5);
}
.cuboid--axle div {
background: var(--metal-two);
}
.cuboid--axle div:nth-of-type(3) {
background: var(--metal-three);
}
.cuboid--axle div:nth-of-type(2),
.cuboid--axle div:nth-of-type(1) {
background: var(--metal-one);
}
.cuboid--axle div:nth-of-type(6) {
background: var(--metal-one);
}
.cuboid--horizontal-stabilizer {
--thickness: calc(var(--base-size) * 0.65);
}
.cuboid--horizontal-stabilizer div {
background: var(--accent-one);
}
.cuboid--horizontal-stabilizer div:nth-of-type(1) {
background: var(--accent-two);
}
.cuboid--horizontal-stabilizer div:nth-of-type(2),
.cuboid--horizontal-stabilizer div:nth-of-type(5) {
background: var(--accent-three);
}
.cuboid--horizontal-stabilizer div:nth-of-type(3),
.cuboid--horizontal-stabilizer div:nth-of-type(4) {
background: var(--accent-four);
}
.cuboid--vertical-stabilizer {
--thickness: calc(var(--base-size) * 0.2);
}
.cuboid--vertical-stabilizer div {
background: var(--accent-one);
}
.cuboid--vertical-stabilizer div:nth-of-type(1) {
background: linear-gradient(
270deg,
var(--accent-two) 0 30%,
transparent 30%
);
}
.cuboid--vertical-stabilizer div:nth-of-type(4) {
background: transparent;
}
.cuboid--vertical-stabilizer div:nth-of-type(4):after {
content: '';
background: var(--accent-four);
height: 150%;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
transform-origin: 50% 100%;
transform: rotateX(-48deg);
}
.cuboid--vertical-stabilizer div:nth-of-type(5) {
background: transparent;
overflow: hidden;
}
.cuboid--vertical-stabilizer div:nth-of-type(5):after {
content: '';
position: absolute;
top: 100%;
transform-origin: 0 0;
transform: rotate(-42deg);
background: var(--accent-three);
height: 150%;
width: 160%;
}
.cuboid--vertical-stabilizer div:nth-of-type(6) {
background: transparent;
overflow: hidden;
}
.cuboid--vertical-stabilizer div:nth-of-type(6):after {
content: '';
position: absolute;
top: 100%;
right: 0;
transform-origin: 100% 0;
transform: rotate(42deg);
background: var(--accent-three);
height: 150%;
width: 160%;
}
.cuboid--wheel-left,
.cuboid--wheel-right {
--thickness: calc(var(--base-size) * 0.1);
}
.cuboid--wheel-left div,
.cuboid--wheel-right div {
background: var(--wheel-one);
}
.cuboid--wheel-left div:nth-of-type(1),
.cuboid--wheel-right div:nth-of-type(1),
.cuboid--wheel-left div:nth-of-type(2),
.cuboid--wheel-right div:nth-of-type(2),
.cuboid--wheel-left div:nth-of-type(4),
.cuboid--wheel-right div:nth-of-type(4) {
background: var(--wheel-two);
}
.cuboid--wheel-left div:nth-of-type(3),
.cuboid--wheel-right div:nth-of-type(3) {
background: var(--wheel-three);
}
.cuboid--wheel-left div:nth-of-type(5):after,
.cuboid--wheel-right div:nth-of-type(5):after,
.cuboid--wheel-left div:nth-of-type(6):after,
.cuboid--wheel-right div:nth-of-type(6):after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 40%;
width: 40%;
background: var(--wheel-hub);
}
.cuboid--cloud div:nth-of-type(1) {
background: var(--cloud-one);
}
.cuboid--cloud div:nth-of-type(2) {
background: var(--cloud-two);
}
.cuboid--cloud div:nth-of-type(3) {
background: var(--cloud-three);
}
.cuboid--cloud div:nth-of-type(4) {
background: var(--cloud-four);
}
.cuboid--cloud div:nth-of-type(5) {
background: var(--cloud-five);
}
.cuboid--cloud div:nth-of-type(6) {
background: var(--cloud-six);
}
.cuboid--beacon {
--thickness: calc(var(--base-size) * 0.02);
}
.cuboid--beacon div {
background: hsla(0, 90%, 50%, var(--alpha));
}
.cuboid--strobe {
--thickness: calc(var(--base-size) * 0.02);
}
.cuboid--strobe div {
background: hsla(0, 90%, 98%, var(--alpha));
}
@media (prefers-reduced-motion: no-preference) {
.plane {
-webkit-animation: roll 10s infinite ease-out alternate;
animation: roll 10s infinite ease-out alternate;
}
.plane__floater {
-webkit-animation: float 2s infinite ease-in-out;
animation: float 2s infinite ease-in-out;
}
.plane__looper {
-webkit-animation: loop 10s infinite ease-in-out;
animation: loop 10s infinite ease-in-out;
}
.cuboid--beacon {
-webkit-animation: flash calc(var(--dark) * 1s) infinite;
animation: flash calc(var(--dark) * 1s) infinite;
}
.cuboid--strobe {
-webkit-animation: flash calc(var(--dark) * 0.5s) infinite;
animation: flash calc(var(--dark) * 0.5s) infinite;
}
.propellor {
-webkit-animation: spin 0.35s infinite linear;
animation: spin 0.35s infinite linear;
}
.cloud__shift {
-webkit-animation: pan calc(var(--speed, 5) * 1s) calc(
var(--delay, 5) * -1s
)
infinite ease-in-out both;
animation: pan calc(var(--speed, 5) * 1s) calc(var(--delay, 5) * -1s)
infinite ease-in-out both;
}
.cloud__body {
-webkit-animation: scale calc(var(--speed, 5) * 1s) calc(
var(--delay, 5) * -1s
)
infinite linear;
animation: scale calc(var(--speed, 5) * 1s) calc(
var(--delay, 5) * -1s
)
infinite linear;
}
}
@-webkit-keyframes flash {
50% {
--alpha: 1;
}
}
@keyframes flash {
50% {
--alpha: 1;
}
}
@-webkit-keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes float {
50% {
transform: translate(-50%, -40%);
}
}
@keyframes float {
50% {
transform: translate(-50%, -40%);
}
}
@-webkit-keyframes loop {
0%,
40% {
transform: translate(-50%, -50%);
}
50%,
100% {
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
@keyframes loop {
0%,
40% {
transform: translate(-50%, -50%);
}
50%,
100% {
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
@-webkit-keyframes roll {
0%,
85% {
transform: translate(-50%, -50%);
}
90%,
100% {
transform: translate(-50%, -50%) rotateX(-360deg);
}
}
@keyframes roll {
0%,
85% {
transform: translate(-50%, -50%);
}
90%,
100% {
transform: translate(-50%, -50%) rotateX(-360deg);
}
}
@-webkit-keyframes nightshift {
0%,
50% {
background: var(--bg);
}
75%,
100% {
background: var(--night);
}
}
@keyframes nightshift {
0%,
50% {
background: var(--bg);
}
75%,
100% {
background: var(--night);
}
}
@-webkit-keyframes scale {
0%,
5%,
95%,
100% {
transform: scale(0);
}
10%,
90% {
transform: scale(1);
}
}
@keyframes scale {
0%,
5%,
95%,
100% {
transform: scale(0);
}
10%,
90% {
transform: scale(1);
}
}
@-webkit-keyframes pan {
0% {
transform: translate(-1000%, 0);
}
100% {
transform: translate(1000%, 0);
}
}
@keyframes pan {
0% {
transform: translate(-1000%, 0);
}
100% {
transform: translate(1000%, 0);
}
}
</style>
</head>
<body>
<div class="scene">
<div class="cloud cloud--one">
<div class="cloud__shift">
<div class="cloud__body">
<div>
<div class="cuboid cuboid--cloud">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div>
<div class="cuboid cuboid--cloud">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div>
<div class="cuboid cuboid--cloud">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
</div>
</div>
<div class="cloud cloud--two">
<div class="cloud__shift">
<div class="cloud__body">
<div>
<div class="cuboid cuboid--cloud">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div>
<div class="cuboid cuboid--cloud">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div>
<div class="cuboid cuboid--cloud">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
</div>
</div>
<div class="cloud cloud--three">
<div class="cloud__shift">
<div class="cloud__body">
<div>
<div class="cuboid cuboid--cloud">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div>
<div class="cuboid cuboid--cloud">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div>
<div class="cuboid cuboid--cloud">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
</div>
</div>
<div class="plane__floater">
<div class="plane__looper">
<div class="plane">
<div class="plane__wheels">
<div class="plane__axle">
<div class="cuboid cuboid--axle">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="plane__wheel plane__wheel--left">
<div class="cuboid cuboid--wheel-left">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="plane__wheel plane__wheel--right">
<div class="cuboid cuboid--wheel-right">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
<div class="plane__body">
<div class="cuboid cuboid--body">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="plane__nose">
<div class="cuboid cuboid--nose">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="plane__propellor">
<div class="propellor"></div>
</div>
<div class="plane__screen">
<div class="cuboid cuboid--screen">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="plane__wings wings">
<div class="wings__top">
<div class="cuboid cuboid--wings-top">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="wings__ghost">
<div class="cuboid cuboid--wings-ghost">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="wings__bottom">
<div class="cuboid cuboid--wings-bottom">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="wings__strobe wings__strobe--left">
<div class="cuboid cuboid--strobe">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="wings__strobe wings__strobe--right">
<div class="cuboid cuboid--strobe">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
<div class="plane__tail">
<div class="cuboid cuboid--tail">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="plane__stabilizer plane__stabilizer--horizontal">
<div class="cuboid cuboid--horizontal-stabilizer">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="plane__stabilizer plane__stabilizer--vertical">
<div class="cuboid cuboid--vertical-stabilizer">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
<div class="plane__beacon">
<div class="cuboid cuboid--beacon">
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
<div class="cuboid__side"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script>
const BOUNDS = 50;
document.addEventListener('pointermove', ({ x, y }) => {
const newX = gsap.utils.mapRange(
0,
window.innerWidth,
-BOUNDS,
BOUNDS,
x
);
const newY = gsap.utils.mapRange(
0,
window.innerHeight,
BOUNDS,
-BOUNDS,
y
);
gsap.set(document.documentElement, {
'--rotate-x': newY,
'--rotate-y': newX,
});
});
let CHECKED = false;
document.addEventListener('pointerdown', (e) => {
CHECKED = !CHECKED;
document.documentElement.style.setProperty('--dark', CHECKED ? 1 : 0);
});
</script>
</body>
</html>