https://codepen.io/mtedwards/pen/neiId


01.jpg


<div class="header">

  <h1>STARS</h1>

  <div class="star star-1"></div>

  <div class="star star-2"></div>

  <div class="star star-3"></div>

  <div class="star star-4"></div>

</div>


<style type="text/css">

@import "compass/css3";


body {background:black;}


h1 {

  color:white;

  font-size:72px;

  padding:25px 0 0 100px;

  font-family:helvetica;

  font-weight:100;

}


.star {

position: absolute;

      background: url(https://dl.dropbox.com/u/1488103/julie-logo-sparkle.png) no-repeat;

      background-size: contain;

      overflow: hidden;

&.star-1 {

width: 50px;

height: 34px;

top:110px;

left:97px;

}

&.star-2 {

width: 83px;

height: 77px;

top:18px;

left:224px;


}

&.star-3 {

width: 74px;

height: 70px;

top:115px;

left:172px;

}

&.star-4 {

width: 68px;

height: 70px;

top:46px;

left:162px;

}

}

</style>


<script type="text/javascript">

<!--

$(function () {

   setInterval(function () {

   $('.star-1').fadeOut(150).delay(2000).fadeIn(300).fadeOut(150).delay(1254);

       $('.star-2').fadeOut(300).fadeIn(120).fadeOut(120).delay(1920);

       $('.star-3').fadeOut(150).delay(1200).fadeIn(300).fadeOut(150).delay(800);

       $('.star-4').fadeOut(700).fadeIn(300).fadeOut(160).delay(1350);

   }, 1);

    });

//-->

</script>