10款好看且实用的文字动画特效,让你的页面更吸引人!

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 种好看且实用的文字动画特效,它们可以为您的网站、应用程序或在线文档添加各种生动的效果,增强用户体验。您可以根据自己的需求选择适用的特效,并使用这些特效为您的文本添加生动的动画效果。

免责声明:本文来自互联网,本站所有信息(包括但不限于文字、视频、音频、数据及图表),不保证该信息的准确性、真实性、完整性、有效性、及时性、原创性等,版权归属于原作者,如无意侵犯媒体或个人知识产权,请来电或致函告之,本站将在第一时间处理。猿码集站发布此文目的在于促进信息交流,此文观点与本站立场无关,不承担任何责任。