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

简要教程

这是一款使用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,    dotSi* = 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     
来源：http://www.htmleaf.com/css3/css3donghua/201603013165.html