简要教程
这是一款使用gsap的tweenmax.js和 css3 来制作的效果炫酷的盒子爆炸动画特效。该爆炸动画在用户点击页面中的一个弹跳的盒子的时候，盒子会爆炸为烟雾，然后会出现 svg logo，整个效果非常连贯逼真。
查看演示 下载插件
使用方法
html结构
该盒子爆炸效果的html结构如下：div.-box是一个立方体盒子，div.explode用于制作爆炸的烟雾效果。svg.icon则是最后出现的svg logo。

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，使用时需要将其引入。

该盒子爆炸动画特性的主要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