基于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
推荐阅读