以下是 HTML5 SVG盒子爆炸动画特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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">
<title>HTML5 SVG盒子爆炸动画特效</title>
<link rel="stylesheet" href="css/style.css">
</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 src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src='js/TweenMax.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>JS代码(index.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 dotsfor (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();
}
);
}
);
CSS代码(style.css):
@-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%;}
分享到QQ
分享到微博
微信扫一扫
