卡卡网

有关文字的效果，前面介绍过很多，例如文字剪纸效果，文字投影效果，文字描边效果，文字浮雕效果，文字渐变等，本文要介绍的是6款文字动画(跳动、浮动、转动、翻转、碰撞等)效果。

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标签，不同字体动画效果使用不同的class。

实例用到一个第三方JS插件：splitting.min.js。JS编程只需要一条JS语句。

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

标签: 文字动画