“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)
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.
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.