极客教程如何使用TypographyMotion插件创建文本交错动画
在本文中，我们将学习如何使用 TypographyMotion 插件创建文本交错动画。该插件完全基于HTML、CSS和JavaScript。这是一种多种动画技术之一，通过从一个状态到另一个状态的逐步延迟来实现良好的视觉交互应用。
注意： 请在工作文件夹中下载 TypographyMotion 插件，并将所需文件包含在HTML代码的头部。
<link href="https://use.typekit.net/lwc3axy.css" rel="stylesheet" type="text/css"/>
<link href="base.98fd6c19.css" rel="stylesheet" type="text/css"/>
<link href="js.00a46daa.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
示例： 以下示例演示了 TypographyMotion 插件帮助开发人员创建交错文本动画。使用不同的HTML元素，如section、figure、circle和SVG来构建网页的结构。使用插件的CSS文件中的不同类来实现内容、框架、段落和光标的可视效果，如下面的代码所示。在将光标移动到”About”和”Close”的”span”框架上后，用户可以看到HTML段落的文本交错动画。请参考输出以获得更好的理解。
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<meta name="description" content="Letter stagger animation" />
<link rel="stylesheet"
href="https://use.typekit.net/lwc3axy.css" />
<link rel="stylesheet"
type="text/css" href="base.98fd6c19.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">
</script>
<link rel="stylesheet" href="js.00a46daa.css" />
</head>
<body class="loading">
<main>
<div class="frame">
<a class="frame__home">
<span class="frame__home-title">
Home
</span>
</a>
<div class="frame__title-wrap">
<h1 class="frame__title">
Staggered text Motion Effect
</h1>
</div>
<a class="frame__about">
<span class=
"frame__about-item frame__about-item--current">
About</span>
<span class="frame__about-item">
Close
</span>
</a>
</div>
<div class="content">
<section class=
"content__item content__item--home content__item--current">
<p class="content__paragraph
content__paragraph--large content__paragraph--first"
data-splitting="">
HTML is a markup language
</p>
<p class=
"content__paragraph content__paragraph--large
content__paragraph--right content__paragraph--last"
data-splitting="">
that is used by the browser
to manipulate text.
</p>
</section>
<section class="content__item content__item--about">
<p class="content__paragraph"
data-splitting=""><b>HTML</b>
stands for</p>
<p class=
"content__paragraph content__paragraph--right" data-splitting="">
Hyper Text Markup Language
</p>
<p class="content__paragraph" data-splitting="">
It defines link between
</p>
<p class="content__paragraph" data-splitting="">
Web pages
</p>
<figure class="content__figure">
<img class="content__figure-img"
src="background2.JPG" alt="background2 image" />
<figcaption class="content__figure-caption">
Markup language is used to define
the text document within tag which
defines the structure of web pages.
This language is used to make notes
for the computer text so that a
machine can understand it and
manipulate text accordingly.
Most of markup languages are human
readable. Language uses tags to define
what manipulation has to be done on
the text.
</figcaption>
</figure>
</section>
</div>
</main>
<svg class="cursor" width="90" height="90"
viewBox="0 0 90 90">
<circle class="cursor__inner" cx="40"
cy="40" r="20">
</circle>
</svg>
<script src="js.00a46daa.js"></script>
</body>
</html>
输出:
