卡卡網(wǎng)

有關(guān)文字的效果，前面介紹過很多，例如文字剪紙效果，文字投影效果，文字描邊效果，文字浮雕效果，文字漸變等，本文要介紹的是6款文字動畫(跳動、浮動、轉(zhuǎn)動、翻轉(zhuǎn)、碰撞等)效果。

HTML

<main class="container">
  <h2 data-splitting class="headline headline--jump">jumping</h2>
  <h2 data-splitting class="headline headline--float">floating</h2>
  <h2 data-splitting class="headline headline--jog">jogging</h2>
  <h2 data-splitting class="headline headline--flip">flipping</h2>
  <h2 data-splitting class="headline headline--twirl">twirling</h2>
  <h2 data-splitting class="headline headline--fall">falling</h2>
</main>
   
  <script src='splitting.min.js'></script>
  <script>
    Splitting();
  </script>

demodownload

字體使用h2標(biāo)簽，不同字體動畫效果使用不同的class。

實例用到一個第三方JS插件：splitting.min.js。JS編程只需要一條JS語句。

<script src='splitting.min.js'></script>
<script>
    Splitting();
</script>

標(biāo)簽: 文字動畫