Amazing Star Glittering Effect Using Pure CSS3

Published on December 4, 2013

Hi There, Welcome back for another amazing CSS3 effect Tutorial. Today we gonna create nice simple twinkling stars using pure CSS3. The effect is very easy. First, we will create a star-like a shape in CSS. We can do it in many ways. But I choose the simple one. We will use HTML5 figure Nodes. One for holding the star, with remaining two we will create a star with help of pseudo class and border-radius property. Finally, we will use CSS3 animation to get the glittering effect. Let’s start.

Demo download

index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Amazing Glitter Star Effect Using Pure CSS3:techumber</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2>
      <a href="techumber.com">Techumber.com </a>
    </h2>
    <figure class="star">
      <figure class="star-top"></figure>
      <figure class="star-bottom"></figure>
    </figure>
    <script type="text/javascript" src="loop.js"></script>
  </body>
</html>

Here, you can see the HTML5 figure tags. We will use them to create the star. I have added a JavaScript loop.js at bottom of the page. We will use little JS to create multiple stars without rewriting code again and again.

style.css

/*simple reset*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -box-sizing: border-box;
}
body {
  background: #212121;
}
h2 {
  text-align: center;
  margin-top: 92px;
  z-index: 999999;
  position: relative;
  font-size: 45px;
  font-family: arial sans-serif;
}
h2 a {
  color: #fff;
}
.star {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  background: #f6f6f6;
  overflow: hidden;
  z-index: 2;
  animation: glitter 4.5s linear 0s infinite normal;
  -webkit-animation: glitter 4.5s linear 0s infinite normal;
  -moz-animation: glitter 4.5s linear 0s infinite normal;
  -ms-animation: glitter 4.5s linear 0s infinite normal;
  -o-animation: glitter 4.5s linear 0s infinite normal;
}
.star-top,
.star-bottom {
  position: relative;
  display: block;
}
.star-top:before,
.star-top:after,
.star-bottom:before,
.star-bottom:after {
  content: '';
  width: 48px;
  height: 48px;
  background: #212121;
  border-radius: 50%;
  position: absolute;
}
/*CSS3 pseudo class for positioning curves*/

.star-top:before {
  top: -24px;
  left: -24px;
}
.star-top:after {
  bottom: -24px;
  left: 24px;
}
.star-bottom:before {
  top: 24px;
  left: -24px;
}
.star-bottom:after {
  top: 24px;
  left: 24px;
}
/*CSS3 keyframes for glittering effect*/

@-webkit-keyframes glitter {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale(0.5);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes glitter {
  0% {
    -moz-transform: scale(1);
    opacity: 1;
  }
  25% {
    -moz-transform: scale(0.5);
    opacity: 0;
  }
  50% {
    -moz-transform: scale(1);
    opacity: 1;
  }
  75% {
    -moz-transform: scale(0.5);
    opacity: 0;
  }
  100% {
    -moz-transform: scale(1);
    opacity: 1;
  }
}

This is the main part. we create a star CSS class. It will hold star-top,star-bottom and we have used CSS pseudo class to two rounded shapes for each inner figure nodes. Finally positioned them to get a star like output.

loop.js

var limit = 100, // Max number of stars
  body = document.body;
loop = {
  //initilizeing
  start: function() {
    for (var i = 0; i <= limit; i++) {
      var star = this.newStar();
      star.style.top = this.rand() * 100 + '%';
      star.style.left = this.rand() * 100 + '%';
      star.style.webkitAnimationDelay = this.rand() + 's';
      star.style.mozAnimationDelay = this.rand() + 's';
      body.appendChild(star);
    }
  },
  //to get random number
  rand: function() {
    return Math.random();
  },
  //createing html dom for star
  newStar: function() {
    var d = document.createElement('div');
    d.innerHTML =
      '<figure class="star"><figure class="star-top"></figure><figure class="star-bottom"></figure></figure>';
    return d.firstChild;
  },
};
loop.start();

As mentioned earlier, we are going to use loop.js for creating as many as stars we want. Just by changing the limit variable value, we will get the number of stars we want. Here we have a simple loop based on limit value. The same DOM used for creating starts. Finally, append all into the body tag of your page. Also, I have added random CSS3 Animation Delay, to get a different glittering delay on stars.

Conclusion

We have used CSS3 transform in your code. So it won’t work in some browsers(IE9 also won’t work). I only tested in Mozilla and Google Chrome. So use it carefully for other browsers. Finally, CSS3 is amazing. I will come up with more scripts soon.