404 Page Not Found Animation

AI Overview: 404 Page Not Found Animation

This project is a visually engaging "404 Page Not Found" error screen designed to replace standard, boring error messages. Its main purpose is to improve user experience by providing an entertaining, space-themed animation when a user navigates to a non-existent URL. The page features a dark, starry background with moving particles and a centerpiece swinging lamp that casts a "spotlight" on the error message.

The project works entirely through HTML and CSS, using no JavaScript. The background stars are created using a clever CSS box-shadow technique, where a single tiny div is given dozens of shadow offsets in different colors to look like a star field. These star layers are then animated to move vertically at different speeds, creating a parallax effect that gives the background a sense of depth.

The most complex part of the animation is the swinging lamp. The lamp is constructed using nested div elements for the cable, the bulb, and the light beam. A CSS keyframe animation called move is applied to the lamp container, swinging it back and forth by rotating it from a top-center origin point. The light beam itself is a semi-transparent trapezoid created using thick borders, which moves in sync with the lamp to illuminate the text below.

Key Code Snippets

1. Creating the Star Field
This snippet shows how dozens of colorful stars are generated from a single element using the box-shadow property.

.starsec {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4;
  animation: animStar 150s linear infinite;
}

2. The Scrolling Background Logic
This animation moves the star layers vertically, resetting once they have moved 2000 pixels to create a seamless loop.

@keyframes animStar {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-2000px); }
}

3. The Swinging Lamp Animation
The move keyframe handles the physics of the lamp, rotating it between 40 and -40 degrees to simulate a swinging motion.

@keyframes move {
  0% { transform: rotate(40deg); }
  50% { transform: rotate(-40deg); }
  100% { transform: rotate(40deg); }
}

4. Simulating the Light Beam
The light beam is created using a large border-bottom and transparent side borders, which creates a cone shape that appears to emit from the bulb.

.light {
  width: 200px;
  height: 0px;
  border-bottom: 900px solid rgb(44 255 255 / 24%);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  position: absolute;
}