패럴랙스

<div class="scene">
  <div class="layer far"></div>
  <div class="layer mid"></div>
  <div class="layer near"></div>
  <div class="ground"></div>
</div>

.scene{position:absolute;inset:0;overflow:hidden}
.layer{position:absolute;left:0;right:0;background-repeat:repeat-x}
.far{top:0;height:55%;opacity:.45;
  background-image:radial-gradient(circle at 10% 80%, var(--accent) 0 26px, transparent 27px),
    radial-gradient(circle at 45% 70%, var(--accent) 0 34px, transparent 35px),
    radial-gradient(circle at 80% 85%, var(--accent) 0 20px, transparent 21px);
  background-size:260px 100%}
.mid{top:30%;height:50%;opacity:.7;
  background-image:radial-gradient(circle at 20% 60%, var(--accent-2) 0 20px, transparent 21px),
    radial-gradient(circle at 65% 50%, var(--accent-2) 0 30px, transparent 31px);
  background-size:200px 100%}
.near{bottom:0;height:34%;
  background-image:linear-gradient(180deg, transparent 40%, var(--accent-3) 40%);
  background-size:120px 100%}
.ground{position:absolute;left:0;right:0;bottom:0;height:10%;background:var(--surface);border-top:1px solid var(--line)}

const far = document.querySelector('.far');
const mid = document.querySelector('.mid');
const near = document.querySelector('.near');
let x = 0;
function loop() {
  x += 1;
  far.style.backgroundPositionX = (-x * 0.2) + 'px';
  mid.style.backgroundPositionX = (-x * 0.5) + 'px';
  near.style.backgroundPositionX = (-x * 1) + 'px';
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);