Web Development
Galaxy – Twinkling stars Animation

Galaxy – Twinkling stars Animation

View Demo Github Link

“Have you ever liked the twinkling stars in the sky? Well, I did. And this post is going to replicate that scene on a webpage. Yes, you heard it right. Would not it be amazing, if you can create a black sky or galaxy full of twinkling stars? In this post, I’m going to explain how with the help of CSS 3 Transitions, you can achieve this.”




Principle Of This Demo

Well, this effect uses a very simple technique(what I think.).We will create two divs having both width and height equals to 100% having display:block and position:absolute. Underlying div will contain the image of stars with the black background color and the front div will contain a moving image of blurred black spots moving in diagonal direction creating the twinkling effect. (Not able to find with naked eyes)

The Html

Under the HTML file, I have defined only two divs with classes stars and twinkling respectively under the body section.

The CSS

In CSS file, I have defined the stars and twinkling classes and defined the CSS transition corresponding to second (front) div.

NOTE:

1. You can find the images used in above code on github through the link provided below.

2. You can watch the demo on the link provided below.

View Demo Github Link

Share this Story

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

About Me


I am an enthusiastic technology geek, always on an endeavour to explore new areas of technology. At present, I am on an endeavour to explore the area of Machine Learning. At KnowMyWork I am constantly sharing my learning from my endeavors with people.

Facebook

Know My Work on Google Plus

Newsletter