<div id="rating">
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
</div>

html {
  background: #333;
  background: radial-gradient(#333, #000);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#rating {
  text-align: center;
  perspective: 250px;
  position: absolute;
  top: 40%;
  width: 100%;
}

#rating span {
  cursor: pointer;
  font-size: 50px;
  padding: 0 10px;
  color: #fff;
  opacity: .5;
  transition: all 150ms;
  display: inline-block;
  transform: rotateX(45deg);
  transform-origin: center bottom;
}

#rating span.hover {
  color: #ff0;
  opacity: 1;
  transform: rotateX(0deg);
  text-shadow: 0 0 30px #ffc;
}

/**
 * Star rating class
 * @constructor
 */
function StarRating() {
  this.init();
};

/**
 * Initialize
 */
StarRating.prototype.init = function() {
  this.stars = document.querySelectorAll('#rating span');
  for (var i = 0; i < this.stars.length; i++) {
    this.stars[i].setAttribute('data-count', i);
    this.stars[i].addEventListener('mouseenter', this.enterStarListener.bind(this));
  }
  document.querySelector('#rating').addEventListener('mouseleave', this.leaveStarListener.bind(this));
};

/**
 * This method is fired when a user hovers over a single star
 * @param e
 */
StarRating.prototype.enterStarListener = function(e) {
  this.fillStarsUpToElement(e.target);
};

/**
 * This method is fired when the user leaves the #rating element, effectively removing all hover states.
 */
StarRating.prototype.leaveStarListener = function() {
  this.fillStarsUpToElement(null);
};

/**
 * Fill the star ratings up to a specific position.
 * @param el
 */
StarRating.prototype.fillStarsUpToElement = function(el) {
  // Remove all hover states:
  for (var i = 0; i < this.stars.length; i++) {
    if (el == null || this.stars[i].getAttribute('data-count') > el.getAttribute('data-count')) {
      this.stars[i].classList.remove('hover');
    } else {
      this.stars[i].classList.add('hover');
    }
  }
};

// Run:
new StarRating();