基于CSS3和GSAP的超酷盒子爆炸动画特效

这是一款使用GSAP的TweenMax.js和 CSS3 来制作的效果炫酷的盒子爆炸动画特效。该爆炸动画在用户点击页面中的一个弹跳的盒子的时候，盒子会爆炸为烟雾，然后会出现 SVG Logo，整个效果非常连贯逼真。

查看演示 下载插件

使用方法

HTML结构

该盒子爆炸效果的HTML结构如下：div.-box是一个立方体盒子，div.explode用于制作爆炸的烟雾效果。svg.icon则是最后出现的SVG Logo。

<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>

CSS样式

在CSS样式中，主要是制作盒子的立方体效果，以及使用CSS3帧动画来制作盒子的弹性和阴影动画效果。

盒子的弹性和阴影动画效果。

@-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);    }  }

盒子的立方体效果：由于IE浏览器不支持transform-style: preserve-3d;属性，所以在IE浏览器中看不到盒子的立体效果。

.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%;  }

JavaScript

该特性依赖于GSAP的TweenMax.js，使用时需要将其引入。

<script src="js/jquery.min.js"></script>  <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>

该盒子爆炸动画特性的主要JS代码如下：

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;         length = Math.random() * (emitterSize / 2 - size / 2);        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,          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();    });  });

来源：http://www.htmleaf.com/css3/css3donghua/201603013165.html