欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-19 14:38:25
...
简要教程

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