1. 简介
在如今的网站和应用程序中，动画效果是增强用户体验的关键因素之一。文字动画特效是其中之一，它可以使文本内容更加生动，更能吸引用户的注意力。本文将介绍 10 种适用于各种网站和应用程序的好看且实用的文字动画特效。
2. 文字动画特效列表
2.1 Animate.css
Animate.css 是一个非常流行的 CSS 库，其中包含大量的动画效果，使得添加动画效果变得非常简单。它可以用于任何 HTML 文本，包括标题、段落、列表和链接。
// 引用 Animate.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
// 应用动画效果
<h1 class="animate__animated animate__bounce">Hello, World!</h1>
2.2 Textillate.js
Textillate.js 是一个 jQuery 插件，它提供了各种文字动画效果，包括打字、滑入、滑出、缩放等等。它非常易于使用，可以为任何 HTML 元素添加动画效果。
// 引用 jQuery 和 Textillate.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js"></script>
// 应用动画效果
<h1 class="tlt">Hello, World!</h1>
<script>
$('.tlt').textillate({ in: { effect: 'bounceIn' } });
</script>
2.3 Splitting.js
Splitting.js 是一个轻量级的 JavaScript 库，它可以将任何文本分解为单个字符、单词或行，并允许为它们添加各种 CSS 动画效果。
// 引用 Splitting.js
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script src="https://unpkg.com/splitting/dist/splitting-cells.min.js"></script>
// 应用动画效果
<h1 class="splitting">Hello, World!</h1>
<script>
Splitting({ target: '.splitting' });
</script>
2.4 Hover.css
Hover.css 是一个 CSS3 动画库，其中包含各种鼠标悬停效果。它可以用于任何链接、按钮或其他 HTML 元素。
// 引用 Hover.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
// 应用动画效果
<a href="#" class="hvr-bounce-in">Click Me!</a>
2.5 Lettering.js
Lettering.js 是一个 jQuery 插件，它可以将任何文本内容分解成单个字母、单词或行，并为它们添加各种 CSS 动画效果。
// 引用 jQuery 和 Lettering.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
// 应用动画效果
<h1 class="lettering">Hello, World!</h1>
<script>
$('.lettering').lettering();
</script>
2.6 Typed.js
Typed.js 是一个 JavaScript 库，它可以将任何文本内容以打字机或手写字体的形式展示，并为它们添加各种动画效果。
// 引用 Typed.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
// 应用动画效果
<h1 class="typed"></h1>
<script>
var typed = new Typed('.typed', {
strings: ['Hello, World!'],
typeSpeed: 80,
backDelay: 1000,
loop: true
});
</script>
2.7 ShuffleText.js
ShuffleText.js 是一个 jQuery 插件，它可以对任何文本内容进行随机字形、旋转、模糊等等动画效果。
// 引用 jQuery 和 ShuffleText.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/tuxsudo/9801457/raw/882e333cddc4c675be7988b9aa6adcefb6b3a8cb/jquery.shuffleLetters.js"></script>
// 应用动画效果
<h1 class="shuffle">Hello, World!</h1>
<script>
$('.shuffle').shuffleLetters();
</script>
2.8 Textrotator.js
Textrotator.js 是一个轻量级的 jQuery 插件，它可以轮换任何文本内容，并为它们添加淡出和淡入的效果。
// 引用 jQuery 和 Textrotator.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/peachananr/rotator/master/js/jquery.simple-text-rotator.min.js"></script>
// 应用动画效果
<h1 class="rotate"></h1>
<script>
$('.rotate').textrotator({
animation: 'fade',
speed: 1000,
repeat: true,
words: ['Hello', 'World']
});
</script>
2.9 Kinetic.js
Kinetic.js 是一个 HTML5 canvas 库，它可以很容易地创建各种动态文字效果，包括旋转、缩放、移动、颜色变化等等。
// 引用 Kinetic.js
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
// 应用动画效果
<div id="canvas-container"></div>
<script>
var stage = new Kinetic.Stage({
container: 'canvas-container',
width: 400,
height: 200
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
text: 'Hello, World!',
fontSize: 60,
fontFamily: 'Calibri',
fill: 'green'
});
text.setOffset({
x: text.getWidth() / 2,
y: text.getHeight() / 2
});
layer.add(text);
stage.add(layer);
var amplitude = 150;
var period = 2000;
var anim = new Kinetic.Animation(function(frame) {
text.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + stage.getWidth() / 2);
}, layer);
anim.start();
</script>
2.10 Vary.js
Vary.js 是一个轻量级的 JavaScript 库，它可以为文本内容添加更加复杂的动画效果，包括颜色变化、尺寸变化、旋转、位移等等。
// 引用 Vary.js
<script src="https://raw.githubusercontent.com/tairraos/Vary/master/Vary.min.js"></script>
// 应用动画效果
<h1 class="vary"></h1>
<script>
Vary.animate('.vary', {
fontSize: [ '100px', '50px', '80px' ],
color: [ '#F00', '#0F0', '#00F' ],
transform: [ 'rotate(0deg)', 'rotate(-90deg)', 'rotate(0deg)' ],
opacity: [ 1, 0, 1 ]
}, {
duration: 2000,
delay: 0,
easing: 'easeInOutQuad',
iterations: Infinity,
direction: 'alternate',
fill: 'backwards'
});
</script>
3. 总结
以上是 10 种好看且实用的文字动画特效，它们可以为您的网站、应用程序或在线文档添加各种生动的效果，增强用户体验。您可以根据自己的需求选择适用的特效，并使用这些特效为您的文本添加生动的动画效果。