jQuery CSS3多种酷炫文字动画插件

一款jQuery CSS3多种酷炫文字动画插件，有多种样式可供选择，文字的颜色、大小、阴影和动画效果都可以自由调整，喜欢的童鞋请收下把。

分类：文字特效 > 文字滚动难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，先引入两个CSS样式文件，然后设置部分页面元素的样式，代码如下：

<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<style type="text/css">
	.long-shadow, .medium-shadow {
	    border: none;
	    -o-text-overflow: clip;
	    text-overflow: clip;
	}
	.long-shadow {
	    -webkit-box-sizing: content-box;
	    -moz-box-sizing: content-box;
	    box-sizing: content-box;
	    text-shadow: 3px 3px 0 #4C6A92, 4px 4px 0 #4C6A92, 5px 5px 0 #4C6A92, 6px 6px 0 #4C6A92, 7px 7px 0 #4C6A92, 8px 8px 0 #4C6A92, 9px 9px 0 #4C6A92, 10px 10px 0 #4C6A92, 11px 11px 0 #4C6A92, 12px 12px 0 #4C6A92, 13px 13px 0 #4C6A92, 14px 14px 0 #4C6A92, 15px 15px 0 #4C6A92, 16px 16px 0 #4C6A92, 17px 17px 0 #4C6A92, 18px 18px 0 #4C6A92, 19px 19px 0 #4C6A92, 20px 20px 0 #4C6A92;
	}
	h1 .animateTitle1 {
	    font-size: 10vh;
	    letter-spacing: 2.7vh;
	    color: #FFF;
	    padding: 1em 0;
	}
</style>

页面的body部分，将多个动画特效放入对应的容器里，代码如下：

<div class="container">
	<div class="row">
		<h1 class="long-shadow"><span class="animateTitle1">ANIMA TEXT</span></h1>
		<h2>演示</h2>
		<div class="well"><h4 class="demo1 text-danger">青春，人生当中最美好的时光，不知不觉就会逝去，正因如此，我们才更加感怀青春。</h4></div>
		<h2>With Animate.css</h2>
		<div class="well"><h4 class="demo2 text-danger">青春，人生当中最美好的时光，不知不觉就会逝去，正因如此，我们才更加感怀青春。</h4></div>
		<h2>Word By Word</h2>
		<div class="well"><h4 class="demo3 text-danger">青春，人生当中最美好的时光，不知不觉就会逝去，正因如此，我们才更加感怀青春。</h4></div>
		<h2>Random</h2>
		<div class="well"><h4 class="demo5 text-danger">青春，人生当中最美好的时光，不知不觉就会逝去，正因如此，我们才更加感怀青春。</h4></div>
		<h2>Reverse</h2>
		<div class="well"><h4 class="demo4 text-danger">青春，人生当中最美好的时光，不知不觉就会逝去，正因如此，我们才更加感怀青春。</h4></div>
	</div>
</div>

页面的底部，先引入jQuery库JS插件，然后启用插件并设置各个文字特效的对应参数，代码如下：

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/dist/animatext.min.js"></script>
<script type="text/javascript">
	$('.animateTitle1').animatext({
	    speed: 300,
	    effect: 'flipInY',
	    reverse: false
	  });
	$(".demo1").animatext();
	$(".demo2").animatext({speed: 150,
	    effect: 'flipInX',
	    infinite: true
	});
	$(".demo3").animatext({speed: 150,
	    mode: "words",
	    effect: 'swing',
	    infinite: true
	});
	$(".demo4").animatext({speed: 150,
	    effect: 'tada',
	    reverse: true,
	    infinite: true
	});
	$(".demo5").animatext({speed: 150,
	    effect: 'tada',
	    random: true,
	    infinite: true
	});
</script>