TweenMax+css实现点击盒子爆炸动画效果代码

TweenMax+css实现点击盒子爆炸动画效果代码
<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    @-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px);
  }
}
@keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-25px);
            transform: translateY(-25px);
  }
}
@-webkit-keyframes shadow {
  0% {
    background: rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
            transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);
  }
  100% {
    background: rgba(0, 0, 0, 0.15);
    -webkit-transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
            transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
}
@keyframes shadow {
  0% {
    background: rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
            transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
    box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);
  }
  100% {
    background: rgba(0, 0, 0, 0.15);
    -webkit-transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
            transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
}
body {
  font-size: 1rem;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  background-color: #36373c;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.label {
  width: 100%;
  position: absolute;
  text-align: center;
}
.label small {
  display: block;
  margin-bottom: 1em;
}

h1 {
  color: #fff;
  margin: 1em 0 0;
  /* margin-bottom: 1em; */
  font-size: 1.6rem;
  font-weight: 100;
}

main {
  height: 100vh;
  /* padding: 10px; */
  text-align: center;
}
main .-content {
  position: relative;
  height: 100vh;
}
main .-content > div {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
main .-content.-index {
  display: table;
  width: 100%;
}
main .-content.-index > div {
  display: table-cell;
  vertical-align: middle;
}

.button {
  cursor: pointer;
  text-align: center;
  border: 0;
  text-decoration: none;
  position: relative;
  display: none;
  z-index: 10;
  padding: 1rem 3rem;
  line-height: 1rem;
}
.button span {
  font-size: 1rem;
  vertical-align: middle;
  text-transform: uppercase;
  font-weight: 800;
  color: #ffffff;
  display: block;
}
.button:hover:before {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.button:hover:after {
  opacity: 0;
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
}
.button:before, .button:after {
  display: block;
  content: ' ';
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: all 280ms;
  transition: all 280ms;
  -webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
          animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button:after {
  background-color: #f8981c;
}
.button:before {
  opacity: 0;
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
  background-color: #6f7dbc;
}

#emitter {
  width: 50px;
  height: 60px;
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-12px);
          transform: translateX(-50%) translateY(-12px);
  cursor: pointer;
}

.emitter-dot {
  background-color: #fff;
  border-radius: 999px;
  position: absolute;
}

.bounce-wrap {
  display: block;
  height: 90px;
}
.bounce-wrap .icon {
  width: 232px;
  height: 66px;
  position: absolute;
  fill: #ffffff;
  left: 47%;
  -webkit-transform: translateX(-50%) translateY(-32px);
          transform: translateX(-50%) translateY(-32px);
  opacity: 0;
  visibility: hidden;
}

.bounce {
  position: relative;
  margin: 4rem 0;
}
.bounce .-box,
.bounce .-box-wrap,
.bounce .-shadow {
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}
.bounce .-shadow {
  bottom: -90px;
  height: 32px;
  width: 32px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
          transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg);
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.6);
  -webkit-animation: shadow 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
          animation: shadow 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}
.bounce .-box-wrap {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-animation: bounce 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
          animation: bounce 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}
.bounce .-box {
  width: 32px;
  height: 32px;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg);
          transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg);
}
.bounce .-box .wall {
  width: 32px;
  height: 32px;
  position: absolute;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.bounce .-box .front {
  background: #f8f8fc;
  -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) rotateX(90deg);
          transform: rotateX(0deg) rotateY(0deg) translateZ(16px) rotateX(90deg);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  height: 50%;
  z-index: 1;
}
.bounce .-box .right {
  height: 32px;
  background: #f8f8fc;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateX(16px) rotateY(90deg) rotateX(90deg);
          transform: translateX(16px) rotateY(90deg) rotateX(90deg);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  height: 50%;
  z-index: 1;
}
.bounce .-box .back {
  background: #f8f8fc;
  -webkit-transform: rotateY(180deg) translateZ(16px) rotateX(90deg);
          transform: rotateY(180deg) translateZ(16px) rotateX(90deg);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  height: 50%;
}
.bounce .-box .left {
  background: #f8f8fc;
  -webkit-transform: translateX(-16px) rotateY(-90deg) rotateX(90deg);
          transform: translateX(-16px) rotateY(-90deg) rotateX(90deg);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  height: 50%;
}
.bounce .-box .front-left {
  background: #d1d5e9;
  height: 32px;
  -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) translateY(16px);
          transform: rotateX(0deg) rotateY(0deg) translateZ(16px) translateY(16px);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.bounce .-box .front-right {
  background: #96a0ce;
  height: 32px;
  -webkit-transform: translateX(16px) rotateY(90deg) translateY(16px);
          transform: translateX(16px) rotateY(90deg) translateY(16px);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.bounce .-box .back-left {
  background: #b0c2d6;
  height: 32px;
  -webkit-transform: rotateX(0deg) translateX(-16px) rotateY(-90deg) translateY(16px);
          transform: rotateX(0deg) translateX(-16px) rotateY(-90deg) translateY(16px);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.bounce .-box .back-right {
  background: #8a9fb4;
  height: 32px;
  -webkit-transform: rotateX(0deg) rotateY(180deg) translateZ(16px) translateY(16px);
          transform: rotateX(0deg) rotateY(180deg) translateZ(16px) translateY(16px);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

</style>
</head>
<body>

	<svg height="0" width="0" style="display: block; pointer-events: none;">
		<g id="logo_technology">
			<path d="M14.1,27.6L25,31.9l10.7-4.2c0,0,0.1-0.1,0.1-0.1c0.7-1.2,1.1-2.5,1.1-4.1c0.1-1.5-0.2-4.1-0.9-7.7L33.3,0
				l-6.1,1.1l2.9,16.6c0.4,2.4,0.6,4.1,0.6,5.1c0,1.1-0.4,2-1.1,2.9c-0.7,0.9-2,1.4-3.7,1.7c-0.6,0.1-1.1,0.2-1.6,0.2
				c-1,0-1.8-0.2-2.6-0.6c-1.1-0.6-1.9-1.4-2.4-2.6c-0.3-0.7-0.7-2.4-1.1-5L15.4,3.2L9.4,4.2l2.8,16C12.8,23.5,13.4,26,14.1,27.6z"/>
			<path d="M20.1,24.1c0.4,1,1.1,1.8,2,2.3c0.6,0.3,1.4,0.5,2.2,0.5c0.5,0,1,0,1.5-0.1c1.6-0.3,2.7-0.8,3.3-1.5
				c0.6-0.7,1-1.5,0.9-2.4c0-0.9-0.2-2.4-0.5-4.5L25,22.9l-6.5-6.5l0.5,2.9C19.4,21.8,19.8,23.4,20.1,24.1z"/>
			<path d="M49.6,22.2l-10.9,4.3l7.1-7.1v-0.7L37,17c0.5,3,0.7,5.1,0.6,6.5c-0.1,1.4-0.4,2.7-0.9,3.8L25,31.9
				l-11.8-4.6c-0.6-1.7-1.2-4-1.7-6.9L11,17.5l-6.1,1.3v0.7l6.5,7.1l-11-4.3L0,22.9l11.9,5.9l0,0L22.2,33L12,29.6l0.5,9.3L25,45.8
				l12.5-6.9l0.6-10l11.9-6L49.6,22.2z M25.3,34.2L25,43.1l-0.3-9.3l10.8-3.5L25.3,34.2z"/>
		
			<path d="M74.5,19.1c-2.2,0-4,0.9-5.6,2.7v-9.6h-5.1v26.7h4.7v-2.8c0.8,1.1,1.7,1.9,2.8,2.4c1.1,0.6,2.2,0.8,3.3,0.8
				c2.2,0,4.1-0.9,5.7-2.7c1.6-1.8,2.4-4.3,2.4-7.6c0-3.2-0.8-5.6-2.3-7.3C78.8,20,76.8,19.1,74.5,19.1z M76.2,33.8
				c-0.8,1-1.8,1.4-2.9,1.4c-1.5,0-2.6-0.7-3.5-2c-0.6-1-0.9-2.4-0.9-4.4c0-1.9,0.4-3.4,1.2-4.3c0.8-1,1.8-1.4,3.1-1.4
				c1.2,0,2.3,0.5,3.1,1.5c0.8,1,1.2,2.6,1.2,4.8C77.4,31.4,77,32.9,76.2,33.8z"/>
			<path d="M59.4,21.3c-0.5-0.6-1.2-1.1-2.1-1.6c-0.9-0.4-2-0.6-3.1-0.6c-2.6,0-4.7,1.1-6.4,3.3v-2.8h-1.1l-3.6,3.6
				v15.7h5.1v-8.7c0-2.2,0.1-3.6,0.4-4.4c0.3-0.8,0.7-1.4,1.4-1.9c0.7-0.5,1.5-0.7,2.4-0.7c0.7,0,1.3,0.2,1.8,0.5
				c0.5,0.3,0.8,0.8,1.1,1.4c0.2,0.6,0.3,2,0.3,4v9.9h5.1v-12c0-1.5-0.1-2.6-0.3-3.4C60.2,22.7,59.9,21.9,59.4,21.3z"/>
			<path d="M132.6,19.1c-2.6,0-4.7,0.9-6.3,2.7c-1.7,1.8-2.5,4.3-2.5,7.5c0,2.7,0.6,4.9,1.9,6.7
				c1.6,2.2,4.1,3.3,7.5,3.3c2.1,0,3.9-0.5,5.3-1.5c1.4-1,2.4-2.4,3.1-4.3l-5.1-0.9c-0.3,1-0.7,1.7-1.2,2.1c-0.5,0.4-1.2,0.7-2,0.7
				c-1.2,0-2.2-0.4-2.9-1.3c-0.8-0.8-1.2-2-1.2-3.5h12.8c0.1-3.9-0.7-6.8-2.4-8.7C137.8,20.1,135.5,19.1,132.6,19.1z M129.1,27.6
				c0-1.4,0.3-2.5,1.1-3.3c0.7-0.8,1.6-1.2,2.8-1.2c1,0,1.9,0.4,2.7,1.2c0.7,0.8,1.1,1.9,1.1,3.4H129.1z"/>
			<path d="M157.4,12.2v9.6c-1.6-1.8-3.4-2.7-5.6-2.7c-2.4,0-4.3,0.9-5.8,2.6c-1.5,1.7-2.3,4.2-2.3,7.5
				c0,3.2,0.8,5.7,2.4,7.5c1.6,1.8,3.5,2.7,5.7,2.7c1.1,0,2.2-0.3,3.2-0.8c1.1-0.5,2-1.4,2.8-2.5v2.8h4.7V12.2H157.4z M156.2,33.8
				c-0.8,1-1.8,1.5-3,1.5c-1.5,0-2.6-0.7-3.5-2c-0.6-0.9-0.9-2.4-0.9-4.5c0-1.9,0.4-3.4,1.2-4.3c0.8-1,1.8-1.4,3-1.4
				c1.2,0,2.3,0.5,3.1,1.5c0.8,1,1.2,2.6,1.2,4.8C157.4,31.3,157,32.8,156.2,33.8z"/>
			<path d="M101.5,22c-1.9-1.9-4.3-2.8-7.2-2.8c-1.9,0-3.6,0.4-5.1,1.3c-1.5,0.8-2.7,2-3.6,3.6
				c-0.8,1.6-1.3,3.2-1.3,4.9c0,2.2,0.4,4.1,1.3,5.6c0.8,1.5,2.1,2.7,3.7,3.5c1.6,0.8,3.3,1.2,5.1,1.2c2.9,0,5.2-1,7.1-2.9
				c1.9-1.9,2.8-4.3,2.8-7.3C104.3,26.3,103.3,23.9,101.5,22z M97.7,33.6c-0.9,1-2,1.5-3.4,1.5c-1.3,0-2.5-0.5-3.4-1.5
				c-0.9-1-1.4-2.5-1.4-4.4c0-1.9,0.5-3.4,1.4-4.4c0.9-1,2-1.5,3.4-1.5c1.3,0,2.5,0.5,3.4,1.5c0.9,1,1.4,2.5,1.4,4.4
				C99,31.1,98.6,32.6,97.7,33.6z"/>
			<polygon points="113.6,26 108.2,20.2 104.3,20.2 104.3,23.1 110.3,29.5 104.3,35.8 104.3,39.1 107.8,39.1 113.6,33 
				119.3,39.1 122.9,39.1 122.9,35.8 116.9,29.5 122.9,23.3 122.9,20.2 119.1,20.2 	"/>
			<path d="M107.4,46.9v-4.5h-1.7v-0.6h4.2v0.6h-1.7v4.5H107.4z"/>
			<path d="M111.1,46.9v-5.2h3.8v0.6h-3.1v1.6h2.9v0.6h-2.9v1.8h3.2v0.6H111.1z"/>
			<path d="M120.3,45.1l0.7,0.2c-0.1,0.6-0.4,1-0.8,1.3c-0.4,0.3-0.8,0.4-1.4,0.4c-0.6,0-1-0.1-1.4-0.3
				c-0.4-0.2-0.6-0.6-0.8-1c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.5-0.7,0.9-0.9c0.4-0.2,0.8-0.3,1.3-0.3
				c0.5,0,1,0.1,1.3,0.4c0.4,0.3,0.6,0.6,0.8,1.1l-0.7,0.2c-0.1-0.4-0.3-0.6-0.5-0.8c-0.2-0.2-0.5-0.3-0.9-0.3c-0.4,0-0.7,0.1-1,0.3
				c-0.3,0.2-0.5,0.4-0.6,0.8c-0.1,0.3-0.2,0.7-0.2,1c0,0.4,0.1,0.8,0.2,1.1c0.1,0.3,0.3,0.6,0.6,0.7c0.3,0.2,0.6,0.2,0.9,0.2
				c0.4,0,0.7-0.1,1-0.3C120.1,45.8,120.3,45.5,120.3,45.1z"/>
			<path d="M122.5,46.9v-5.2h0.7v2.1h2.7v-2.1h0.7v5.2h-0.7v-2.4h-2.7v2.4H122.5z"/>
			<path d="M128.4,46.9v-5.2h0.7l2.8,4v-4h0.7v5.2h-0.7l-2.8-4.1v4.1H128.4z"/>
			<path d="M134,44.4c0-0.9,0.2-1.5,0.7-2c0.5-0.5,1.1-0.7,1.8-0.7c0.5,0,0.9,0.1,1.3,0.3c0.4,0.2,0.7,0.5,0.9,1
				c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.5,0.7-0.9,0.9c-0.4,0.2-0.8,0.3-1.3,0.3c-0.5,0-0.9-0.1-1.3-0.4
				c-0.4-0.2-0.7-0.6-0.9-1C134.1,45.3,134,44.8,134,44.4z M134.8,44.4c0,0.6,0.2,1.1,0.5,1.5c0.3,0.4,0.8,0.5,1.3,0.5
				c0.5,0,1-0.2,1.3-0.5c0.3-0.4,0.5-0.9,0.5-1.5c0-0.4-0.1-0.8-0.2-1.1c-0.1-0.3-0.4-0.6-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3
				c-0.5,0-0.9,0.2-1.3,0.5C134.9,43.1,134.8,43.6,134.8,44.4z"/>
			<path d="M140.5,46.9v-5.2h0.7v4.5h2.6v0.6H140.5z"/>
			<path d="M145,44.4c0-0.9,0.2-1.5,0.7-2c0.5-0.5,1.1-0.7,1.8-0.7c0.5,0,0.9,0.1,1.3,0.3c0.4,0.2,0.7,0.5,0.9,1
				c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.5,0.7-0.9,0.9c-0.4,0.2-0.8,0.3-1.3,0.3c-0.5,0-0.9-0.1-1.3-0.4
				c-0.4-0.2-0.7-0.6-0.9-1C145.1,45.3,145,44.8,145,44.4z M145.7,44.4c0,0.6,0.2,1.1,0.5,1.5c0.3,0.4,0.8,0.5,1.3,0.5
				c0.5,0,1-0.2,1.3-0.5c0.3-0.4,0.5-0.9,0.5-1.5c0-0.4-0.1-0.8-0.2-1.1c-0.1-0.3-0.4-0.6-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3
				c-0.5,0-0.9,0.2-1.3,0.5C145.9,43.1,145.7,43.6,145.7,44.4z"/>
			<path d="M154,44.9v-0.6l2.2,0v1.9c-0.3,0.3-0.7,0.5-1.1,0.6c-0.4,0.1-0.7,0.2-1.1,0.2c-0.5,0-1-0.1-1.4-0.3
				c-0.4-0.2-0.7-0.5-1-0.9c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.5-0.8,0.9-1c0.4-0.2,0.9-0.3,1.4-0.3
				c0.4,0,0.7,0.1,1,0.2c0.3,0.1,0.5,0.3,0.7,0.5c0.2,0.2,0.3,0.5,0.4,0.8l-0.6,0.2c-0.1-0.3-0.2-0.5-0.3-0.6
				c-0.1-0.2-0.3-0.3-0.5-0.4c-0.2-0.1-0.5-0.1-0.7-0.1c-0.3,0-0.6,0-0.8,0.1c-0.2,0.1-0.4,0.2-0.6,0.4c-0.1,0.2-0.3,0.3-0.3,0.5
				c-0.1,0.3-0.2,0.7-0.2,1c0,0.5,0.1,0.8,0.2,1.2c0.2,0.3,0.4,0.5,0.7,0.7c0.3,0.2,0.6,0.2,1,0.2c0.3,0,0.6-0.1,0.9-0.2
				c0.3-0.1,0.5-0.2,0.7-0.4v-1H154z"/>
			<path d="M159.3,46.9v-2.2l-2-3h0.8l1,1.6c0.2,0.3,0.4,0.6,0.5,0.9c0.2-0.3,0.3-0.6,0.6-0.9l1-1.5h0.8l-2.1,3v2.2
				H159.3z"/>
		</g>
	</svg>
	<main>

		<div class="label">
			<a href="#" class="button js-trigger-reset">
				<span>重置</span>
			</a>
		</div>
		<div class="-content -index">
			<div>
				<div class="bounce-wrap">
					<div class="bounce">
						<div class="-shadow"></div>
						<div class="-box-wrap js-box-wrap">
							<div class="-box">
								<div class="front wall"></div>
								<div class="back wall"></div>
								<div class="right wall"></div>
								<div class="left wall"></div>

								<div class="front-right wall"></div>
								<div class="front-left wall"></div>
								<div class="back-right wall"></div>
								<div class="back-left wall"></div>  
							</div>
						</div>
						<div id="emitter"></div>
						<div class="explode">
							<span class="cloud -one js-cloud-1"></span>
							<span class="cloud -two js-cloud-2"></span>
							<span class="cloud -three js-cloud-3"></span>
						</div>
						<svg class="icon js-icon-logo" viewBox="0 0 162.5 47">
							<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo_technology"></use>
						</svg>
					</div>
				</div>
	    		</div>
		</div>
	</main>
	<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
	<script >
	    function init() {
	var emitter = document.getElementById("emitter"),
		container = document.createElement("div"),
		emitterSize = 100,
		dotQuantity = 50,
		dotSizeMax = 100,
		dotSizeMin = 10,
		speed = 1,
		gravity = 1;
	
	container.setAttribute("id", "emit-wrap");
	//setup the container with the appropriate styles
    container.style.cssText = "position:absolute; left:0; top:0; overflow:visible; z-index:5000; pointer-events:none;";
	document.body.appendChild(container);
	
	function createExplosion(container) {
		var tl = new TimelineLite({
			onComplete: function() {
				$('#emit-wrap').remove();
			}
		}),
			angle, length, dot, i, size;
		//create all the dots
		for (i = 0; i < dotQuantity; i++) {
			dot = document.createElement("div");
			dot.className = "emitter-dot";
			size = getRandom(dotSizeMin, dotSizeMax);
			container.appendChild(dot);
			angle = Math.random() * Math.PI * 2; //random angle
			//figure out the maximum distance from the center, factoring in the size of the dot (it must never go outside the circle), and then pick a random spot along that length where we'll plot the point. 
			length = Math.random() * (emitterSize / 2 - size / 2);
			//place the dot at a random spot within the emitter, and set its size.
			TweenLite.set(dot, {
				x: Math.cos(angle) * length,
				y: Math.sin(angle) * length,
				width: size,
				height: size,
				xPercent: -50,
				yPercent: -50,
				force3D: true
			});
			//this is where we do the animation...
			tl.to(dot, 1 + Math.random(), {
				opacity: 0,

				//if you'd rather not do physics, you could just animate out directly by using the following 2 lines instead of the physics2D:
				x: Math.cos(angle) * length * 24,
				y: Math.sin(angle) * length * 24
			}, 0);
		}
		return tl;
	}
	
	function explode(element) {
		var explosion = createExplosion(container);
		// var bounds = element.getBoundingClientRect();

		var offset = $(element).offset();
		var width = $(element).width();
		var height = $(element).height();

		// TweenLite.set(container, {
		//     x: bounds.left + bounds.width / 2,
		//     y: bounds.top + bounds.height / 2
		// });
		TweenLite.set(container, {
			x: offset.left + width / 2,
			y: offset.top + height / 2
		});
		explosion.restart();
	}

	function getRandom(min, max) {
		return min + Math.random() * (max - min);
	}
	
	emitter.onmousedown = emitter.ontouchstart = function() {
		explode(emitter);
		$(emitter).hide();

		$('.-shadow').hide();
		$('.js-box-wrap').hide();
		setTimeout(function(){
			$('.js-trigger-reset').css({
				'display': 'inline-block'
			});
		}, 2000);
		

		var tl = new TimelineMax();
		tl.add("logo")
		.add(logoReveal,"logo");
	}
}

function logoReveal() {
	var logoReveal = new TimelineMax();
             
    logoReveal.to('.js-icon-logo', 1, {autoAlpha: 1, ease: Power4.easeOut});
              
    return logoReveal;
}

function reset() {
	$('.-shadow').attr('style', '');
	$('.js-box-wrap').attr('style', '');
	$('.js-icon-logo').attr('style', '');
	$('#emitter').attr('style', '');
	$('.js-trigger-reset').hide();
}

$(document).ready(function () {
	init();
	$('.js-trigger-reset').click(function() {
		reset();
		init();
	});
});
	</script>
</body>
</html>

网友评论0