<div class="plane"></div>
* {
  box-sizing: border-box;
}

body {
  --black: rgb(4 4 31);
  margin: 0;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to top, var(--black), var(--black) 28%, rgb(18 49 255 / 0.4) 50%, transparent 70%), radial-gradient(ellipse at center, rgb(18 49 255), var(--black) 65%, var(--black));
}

body::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, transparent 50%, var(--black));
}

.plane {
  --size: 20rem;
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  perspective: 40rem;
  perspective-origin: top center;
}

.plane::after {
  --stripe: 5rem;
  --stripeH: 15rem;
  --c: rgb(196 244 255);
  --grad1: transparent -0.3rem, var(--c) 0rem, transparent 0.3rem, transparent calc(var(--stripe) - 0.3rem);
  --grad1a: transparent -2rem, rgb(196 244 255 / 0.3) 0rem, transparent 2rem, transparent calc(var(--stripe) - 2rem);
  --grad2: transparent -0.3rem, var(--c) 0rem, transparent 0.3rem, transparent calc(var(--stripeH) - 0.3rem);
  --grad2a: transparent -1rem, rgb(196 244 255 / 0.3) 0rem, transparent 1rem, transparent calc(var(--stripeH) - 1rem);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  margin: 0 auto;
  background: repeating-linear-gradient(to bottom, var(--grad1)), repeating-linear-gradient(to bottom, var(--grad1a)), repeating-linear-gradient(to right, var(--grad2)), repeating-linear-gradient(to right, var(--grad2a));
  background-size: 100% 20rem;
  background-position: 0 0;
  animation: bgMove 2000ms linear infinite;
  border: 0.3rem solid var(--c);
  transform: rotateX(90deg) translate3d(-25%, 0, 0);
  transform-origin: bottom center;
}

@keyframes bgMove {
  to {
    background-position: 0 20rem;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.