Textillate是一款基于jquery的使用css3实现文字动画的小巧插件。Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库，您可非常轻轻松地把这些动画效果应该于网页中的任何文字。

textillate.js使用

引入核心文件

<link href="assets/animate.css" rel="stylesheet">
<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
<script src="assets/jquery.lettering.js"></script>

构建html标签

<h1 class="tlt">My Title</h1>

写入JS，初始化

$(function () {
    $('.tlt').textillate();
})

以上代码使用了默认的动画效果，如果你想改变动理效果，可以在html中调用data api

<h1 class="tlt" data-in-effect="rollIn">Title</h1>

你也可以在初始化时使用参数来改变

$('.tlt').textillate({ in: { effect: 'rollIn' } });

当然，你也可以用Textillate给一个列表的文字都具有动画

<h1 class="tlt">
    <ul class="texts">
        <li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>
        <li data-in-effect="fadeIn">Another Title</li>
    </ul>
</h1>
$('.tlt').textillate();

注意：你可以通过调用data api配置动画参数来控制每个li的动画效果。

链接: https://fly63.com/nav/1546