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
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)
Under the HTML file, I have defined only two divs with classes stars and twinkling respectively under the body section.
In CSS file, I have defined the stars and twinkling classes and defined the CSS transition corresponding to second (front) div.
- You can find the images used in above code on github through the link provided below.
- You can watch the demo on the link provided below.