欢迎Stack Overflow尊贵会员＃599，Catherine Kuck又名Catija！

#1 楼

#2 楼

#3 楼

#4 楼

#5 楼

#6 楼

#7 楼

#8 楼

 // Click "Congratulations!" to play animation

$(function() {
  var numberOfStars = 150;

  for (var i = 0; i < numberOfStars; i++) {
    $('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
  }

  animateText();

  animateBlobs();
});

$('.congrats').click(function() {
  reset();

  animateText();

  animateBlobs();
});

function reset() {
  $.each($('.blob'), function(i) {
    TweenMax.set($(this), {
      x: 0,
      y: 0,
      opacity: 1
    });
  });

  TweenMax.set($('h1'), {
    scale: 1,
    opacity: 1,
    rotation: 0
  });
}

function animateText() {
  TweenMax.from($('h1'), 0.8, {
    scale: 0.4,
    opacity: 0,
    rotation: 15,
    ease: Back.easeOut.config(4),
  });
}

function animateBlobs() {

  var xSeed = _.random(350, 380);
  var ySeed = _.random(120, 170);

  $.each($('.blob'), function(i) {
    var $blob = $(this);
    var speed = _.random(1, 5);
    var rotation = _.random(5, 100);
    var scale = _.random(0.8, 1.5);
    var x = _.random(-xSeed, xSeed);
    var y = _.random(-ySeed, ySeed);

    TweenMax.to($blob, speed, {
      x: x,
      y: y,
      ease: Power1.easeOut,
      opacity: 0,
      rotation: rotation,
      scale: scale,
      onStartParams: [$blob],
      onStart: function($element) {
        $element.css('display', 'block');
      },
      onCompleteParams: [$blob],
      onComplete: function($element) {
        $element.css('display', 'none');
      }
    });
  });
} 

 @import url(https://fonts.googleapis.com/css?family=Sigmar+One);
body {
  background: #3da1d1;
  color: #fff;
  overflow: hidden;
}

.congrats {
  position: absolute;
  //top: 140px;
  width: 550px;
  height: 100px;
  padding: 20px 10px;
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
}

h1 {
  transform-origin: 50% 50%;
  font-size: 50px;
  font-family: 'Chopin Script'/*, cursive*/;
  cursor: pointer;
  z-index: 2;
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
}

.blob {
  height: 50px;
  width: 50px;
  color: #ffcc00;
  position: absolute;
  top: 45%;
  left: 45%;
  z-index: 1;
  font-size: 30px;
  display: none;
} 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="congrats">
  <h1>Congratulations!</h1>
</div> 

#9 楼

#10 楼

#11 楼

#12 楼

#13 楼

#14 楼

#15 楼

#16 楼

#17 楼

#18 楼

#19 楼

#20 楼