基于CSS3和GSAP的超酷盒子爆炸动画特效_html/css_WEB-ITnose

简要教程

这是一款使用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