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

来源：懂视网责编：小采时间：2020-11-27 16:37:42

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

基于CSS3和GSAP的超酷盒子爆炸动画特效_html/css_WEB-ITnose:简要教程这是一款使用GSAP的TweenMax.js和 CSS3 来制作的效果炫酷的盒子爆炸动画特效。该爆炸动画在用户点击页面中的一个弹跳的盒子的时候，盒子会爆炸为烟雾，然后会出现 SVG Logo，整个效果非常连贯逼真。查看演示下载插件使用方法 HTML结构

推荐度：

点击下载本文 文档为doc格式

导读基于CSS3和GSAP的超酷盒子爆炸动画特效_html/css_WEB-ITnose:简要教程这是一款使用GSAP的TweenMax.js和 CSS3 来制作的效果炫酷的盒子爆炸动画特效。该爆炸动画在用户点击页面中的一个弹跳的盒子的时候，盒子会爆炸为烟雾，然后会出现 SVG Logo，整个效果非常连贯逼真。查看演示下载插件使用方法 HTML结构

简要教程

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

来源：http://www.htmleaf.com/css3/css3donghua/201603013165.html

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com