<div class="wrapper">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <h1>Sparkles</h1>
  <span class="hover">Hover me</span>
</div>

@import "bourbon";

body {
  background: #222;
  font-family: Helvetica;
  text-align: center;
  color: #fff;
  margin-top: 12em;
}

.wrapper {
  width: 30em;
  margin: 0 auto;
  position: relative;
  -webkit-perspective: 13em;
}

h1 {
  font-size: 6em;
  margin: 0;
}

.hover {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.dot {
  @include transition(all .5s ease-in-out);
  position: absolute;
  border-radius: 100%;
  width: .5em;
  height: .5em;
  display: block;
  left: 50%;
  top: 50%;
  opacity: 0.5;
}  

@for $i from 1 through 100 {
  .dot:nth-child(#{$i}) {
    $xpos: random(400) - 200;
    $ypos: random(100) - 50;
    $zpos: random(100) - 50;
    
    background: rgb(255, random(100) + 100, 0);
    -webkit-transform:
      translateX($xpos + px)
      translateY($ypos + px)
      translateZ($zpos + px)
      rotate3d(1,1,1,random(360) + deg)
      scale(0.2);
    
    .wrapper:hover & {
      opacity: 1; 
      -webkit-transform:
          translateX($xpos + px)
          translateY($ypos + -30 + px)
          translateZ(random(200) - 100 + px)
          rotate3d(1,1,1,random(10) + deg)
          scale(1);
    }
  }
}