Twinkling Stars Animation | CSS & Javascript

 Creating Twinkling Stars with JavaScript and CSS

The HTML Structure

The HTML is minimal - just a single <div> with class "section" where all our stars will be placed.

The JavaScript Magic

1. Creating Stars: The script creates 100 star elements (<div> with class "box") and positions them randomly on the screen.

2. Random Sizing: Each star gets a random font size between 10-20px.

3. Animation: Every 50 milliseconds, a random star is selected to "twinkle" by toggling the 'animate' class.

CSS Styling

• The stars use Font Awesome's star icon (f005) as their content

• Default stars are semi-transparent black

• When animated, stars turn yellow with a glowing effect using text-shadow

• The animation includes a slight scale increase for emphasis

Twinkling Stars Animation | CSS & Javascript | Source Code

See the Pen Twinkling Stars Animation | CSS & Javascript by Grapdroad (@grapdroad) on CodePen.