基于CSS3和GSAP的超酷盒子爆炸動畫特效

jopen 8年前發布 | 33K 次閱讀 CSS3 WebKit

這是一款使用GSAP的TweenMax.js和 CSS3 來制作的效果炫酷的盒子爆炸動畫特效。該爆炸動畫在用戶點擊頁面中的一個彈跳的盒子的時候，盒子會爆炸為煙霧，然后會出現 SVG Logo，整個效果非常連貫逼真。

查看演示下載插件

使用方法

HTML結構

該盒子爆炸效果的HTML結構如下：div.-box是一個立方體盒子，div.explode用于制作爆炸的煙霧效果。svg.icon則是最后出現的SVG Logo。

<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>

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，使用時需要將其引入。

<script src="js/jquery.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>

該盒子爆炸動畫特性的主要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 dots
    for (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; 
      length = Math.random() * (emitterSize / 2 - size / 2);
      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,
        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();
  });
});

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

來自： http://www.html5cn.org/article-9369-1.html

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/news/view/1058b3f

CSS3 WebKit

基于CSS3和GSAP的超酷盒子爆炸動畫特效

相關資訊

相關經驗

相關文檔