Solar Eclipse Animation

This project is a responsive solar eclipse animation created using HTML and CSS while following a course provided by Coddy.tech. It demonstrates how CSS animations, pseudo-elements, gradients, shadows, and transforms can be combined to create a simple visual effect without using JavaScript.

Live Demo

View the animation on GitHub Pages.

Features

• CSS Animation: Uses @keyframes to simulate the movement of the Sun behind the Moon.
• Pseudo-element: Uses the ::before pseudo-element to create the animated light source.
• Eclipse Glow: Combines multiple box-shadow values to create a glowing eclipse effect.
• CSS Transforms: Uses translate() and scale() during the animation.
• Gradient Backgrounds: Applies gradients to both the page background and the Moon.
• Responsive Design: Reduces the size of the animation on smaller screens.
• No JavaScript: The entire effect is created using HTML and CSS.

File Structure

• index.html: Contains the basic HTML structure and Moon container.
• styles.css: Defines the layout, appearance, animation, and responsive behavior.

Usage

To run the project locally:

1. Download or clone the repository.
2. Open the index.html file in a web browser.
3. The animation will start automatically.

How It Works

The .moon element creates the dark circular Moon. Its ::before pseudo-element represents the light source behind it. The pseudo-element moves diagonally using CSS transforms. At the midpoint of the animation, it becomes brighter and produces a glow using box-shadow, creating the appearance of a solar eclipse.

Customization

You can customize the animation by:

• Changing the Moon size in styles.css.
• Adjusting the animation duration.
• Modifying the background and glow colors.
• Changing the movement distance in the translate() values.
• Editing the scale values used in the animation.

Acknowledgment

This project was built using the guide provided by Coddy.tech. The original project can be found here.