有关文字的效果，前面介绍过很多，例如文字剪纸效果，文字投影效果，文字描边效果，文字浮雕效果，文字渐变等，本文要介绍的是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>

 

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。