CSS Only Starry Sky Background Effect

Preview:

Description:

An animated, romantic, and mesmerizing starry sky effect that interacts with cursor movement.

This effect can be used as an impressive CSS background or even a specific page element to create a stand-out design. It utilizes Javascript to make the stars interact with cursor movement, but you can deactivate this, making it usable for many audiences.

How to use it:

1. Build the HTML for the starry sky effect.

<div class="bg">
  <div class="z-3">
    <div class="tile top-left animate-opacity freq-5"></div>
    <div class="tile top-right animate-opacity freq-9"></div>
    <div class="tile bottom-left animate-opacity freq-7"></div>
    <div class="tile bottom-right animate-opacity freq-10"></div>
  </div>
  <div class="z-2">
    <div class="tile top-left animate-opacity freq-9 delay-2"></div>
    <div class="tile top-right animate-opacity freq-5 delay-2"></div>
    <div class="tile bottom-left animate-opacity freq-6 delay-4"></div>
    <div class="tile bottom-right animate-opacity freq-10 delay-4"></div>
  </div>
  <div class="z-1">
    <div class="tile top-left animate-opacity freq-7 delay-2"></div>
    <div class="tile top-right animate-opacity freq-5 delay-4"></div>
    <div class="tile bottom-left animate-opacity freq-9 delay-2"></div>
    <div class="tile bottom-right animate-opacity freq-5 delay"></div>
  </div>
</div>

2. The main CSS styles.

@keyframes slide-transparency {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.animate-opacity {
  animation-name: slide-transparency;
  animation-iteration-count: infinite;
}
.freq-5 {
  animation-duration: 5s;
}
.freq-6 {
  animation-duration: 6.33s;
}
.freq-7 {
  animation-duration: 7s;
}
.freq-8 {
  animation-duration: 8.88s;
}
.freq-9 {
  animation-duration: 9s;
}
.freq-10 {
  animation-duration: 10.17s;
}
.delay-2 {
  animation-delay: 1.33s;
}
.delay-4 {
  animation-delay: 2.11s;
}
.bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: -1000;
}
.z-1,
.z-2,
.z-3 {
  position: absolute;
  width: 150vw;
  height: 150vw;
  left: -50vw;
  top: -50vw;
  transform-origin: center;
}
.tile {
  overflow: hidden;
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  background-size: 512px 512px;
}
.top-left {
  background-image: url("./img/topleft.png");
}
.top-right {
  background-image: url("./img/topright.png");
}
.bottom-left {
  background-image: url("./img/bottomleft.png");
}
.bottom-right {
  background-image: url("./img/bottomright.png");
}

3. Make the stars interact with cursor movement. OPTIONAL.

"use strict";
const z1 = document.getElementsByClassName("z-1")[0];
const z2 = document.getElementsByClassName("z-2")[0];
const z3 = document.getElementsByClassName("z-3")[0];
const ratio = 0.05;
let x;
let y;
document.addEventListener("mousemove", function (e) {
  x = e.pageX;
  y = e.pageY;
});
requestAnimationFrame(function animation() {
  z1.style.transform = "translate(" + x * ratio + "px," + y * ratio + "px)";
  z2.style.transform =
    "translate(" +
    (x * ratio) / 2 +
    "px," +
    (y * ratio) / 2 +
    "px) rotate(217deg)";
  z3.style.transform =
    "translate(" +
    (x * ratio) / 3 +
    "px," +
    (y * ratio) / 3 +
    "px) rotate(71deg)";
  requestAnimationFrame(animation);
});