<figure class="star">
      <figure class="star-top">
      </figure>
      <figure class="star-bottom">
      </figure>
    </figure>

<figure class="star2">
      <figure class="star-top">
      </figure>
      <figure class="star-bottom">
      </figure>
    </figure>

<figure class="star3">
      <figure class="star-top">
      </figure>
      <figure class="star-bottom">
      </figure>
    </figure>

<figure class="star4">
      <figure class="star-top">
      </figure>
      <figure class="star-bottom">
      </figure>
    </figure>
/* ============================================================================================== 
Renata G Martins
http://www.renatagmartins.com.br
================================================================================================= */

*{ margin: 0; padding: 0;}

body {
	/*To hide the horizontal scroller appearing during the animation*/
	overflow: hidden;
  background:#000;
   background: rgba(0, 0, 0, 0) url("http://ciarealejo.com.br/wp-content/themes/ciarealejo/images/bg.jpg") no-repeat scroll 0 0 / cover ;
    display: inline-block;
    height: 100%;
    min-height: 600px;
    position: relative;
    width: 100%;
}

.star {
    display: block;
    position: absolute;
    top: 10%;
    left: 50%;
    width: 40px;
    height: 40px;
    overflow: hidden;
    z-index: 2;
    animation: glitter 6s linear 0s infinite normal;
    -webkit-animation: glitter 6s linear 0s infinite normal;
    -moz-animation: glitter 6s linear 0s infinite normal;
    -ms-animation: glitter 6s linear 0s infinite normal;
    -o-animation: glitter 6s 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: "";
    position: absolute;
}

/*CSS3 pseudo class for positioning curves*/

.star-top:before {
    top: 20px;
    left: 0;
  width:40px;
  height:3px;
  background:#fff;
  -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.star-bottom:before {
    top: 20px;
    left: 0;
  width:40px;
  height:3px;
  background:#fff;
   -ms-transform: rotate(240deg); /* IE 9 */
    -webkit-transform: rotate(240deg); /* Chrome, Safari, Opera */
    transform: rotate(240deg);
  -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.star-bottom:after {
    top: 20px;
    left: 0;
  width:40px;
  height:3px;
  background:#fff;
   -ms-transform: rotate(120deg); /* IE 9 */
    -webkit-transform: rotate(120deg); /* Chrome, Safari, Opera */
    transform: rotate(120deg);
  -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}




.star2 {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    overflow: hidden;
    z-index: 2;
    animation: glitter 6s linear 0s infinite normal;
    -webkit-animation: glitter 6s linear 0s infinite normal;
    -moz-animation: glitter 6s linear 0s infinite normal;
    -ms-animation: glitter 6s linear 0s infinite normal;
    -o-animation: glitter 6s linear 0s infinite normal;
}
.star3 {
    display: block;
    position: absolute;
    top: 10%;
    left: 90%;
    width: 40px;
    height: 40px;
    overflow: hidden;
    z-index: 2;
    animation: glitter 6s linear 0s infinite normal;
    -webkit-animation: glitter 6s linear 0s infinite normal;
    -moz-animation: glitter 6s linear 0s infinite normal;
    -ms-animation: glitter 6s linear 0s infinite normal;
    -o-animation: glitter 6s linear 0s infinite normal;
}
.star4 {
    display: block;
    position: absolute;
    top: 10%;
    left: 10%;
    width: 40px;
    height: 40px;
    overflow: hidden;
    z-index: 2;
    animation: glitter 6s linear 0s infinite normal;
    -webkit-animation: glitter 6s linear 0s infinite normal;
    -moz-animation: glitter 6s linear 0s infinite normal;
    -ms-animation: glitter 6s linear 0s infinite normal;
    -o-animation: glitter 6s linear 0s infinite normal;
}

/*CSS3 keyframes for glittering effect*/

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.