10 个惊人的动画文本 CSS 和 JavaScript 代码片段

已发表: 2021-03-09

您可以使用基本的 CSS 和几行 JavaScript 来制作一些非常令人眼花缭乱的文本效果。 这些效果的范围从文本显示动画到 3D 旋转或您能想象到的任何其他效果。

在这篇文章中，我从网络上收集了 10 个最酷的示例，展示了您只需一点点程式化的文本和 CSS 代码就可以做到的事情。

您可能还喜欢这些 CSS 动画工具。

1. 标题动画

Robin Treur 的这个动画标题效果遵循了许多电影或电子游戏的风格。 这些字母使用 CSS3 文本阴影和轻微的对角线倾斜呈现出突出的 3D 效果。

淡入动画风格让我想起了 1930 年代的经典电影，带有相同的倾斜文本。 一切都通过 CSS 控制，但“重启”按钮是使用 JavaScript 构建的。 这样，您可以多次播放动画以获得更好的外观。

2. 粉碎

使用 After Effects 等工具创建破碎的破碎文本是一项简单的任务，但使用代码创建文本破碎动画要困难得多，这让 Arsen Zbidniakov 的这支笔令人印象深刻。

文本实际上是使用 SVG 形状构建的，这使得动画过程更容易一些。 这也意味着您不能像往常一样选择、复制或与文本交互。

但是，如果您将其用于徽标或其他非交互式页面元素，则可以为您的网站添加类似的效果。

3. 扭曲的字母

开发人员 Mamun Khandaker 将这组扭曲的字母动画组合在一起。 每种动画样式都有不同的名称，您可以在这支笔中浏览它们。

我可以看到这些文本效果用于工具/网络应用程序的登录页面或主页。 这些立即引起了人们的注意，并给访客留下了持久的印象。 此外，它们都是用 100% 纯 CSS 制作的，而且非常容易调整。

4.像素字母

这种独特的动画像素效果绝对是奇怪的，但又令人着迷。 它主要依赖于 JavaScript，由开发人员 Georgi Nikoloff 创建，作为使用 HTML5 画布元素的一种方式。

它使用 Noto Serif 作为字体基础，并将字母转换为画布元素内的可延展元素。 JavaScript 将字母分解成更小的点，这些点构成了动画的基础。

我不能说这会有很多实际用途，但它证明了网络动画已经走了多远。

5. 打字轮播

这种效果在小型投资组合和代理网站上非常流行。 键入文本动画通常出现在站点的标题中，它模仿某人在文字处理器中键入的外观。

一切都包含在一个元素中，并很好地混合了 CSS 和 JavaScript 动画。 有时您会看到网站使用它来列出他们的工作、历史或合作过的客户的描述。

适度使用绝对是一种有趣的效果。 由于一次只能看到一个单词，它确实限制了页面的可读性，但是当谨慎使用时，这是一种非常酷的效果，任何人都可以复制。

6. 泰格泰格

借用威廉·布莱克 (William Blake) 的诗歌《老虎》(The Tyger) 中的文字，约瑟夫·马图奇 (Joseph Martucci) 创作的这部非常独特的动画确实吸引了您的注意力。

这里的重点不是内容，而是排版样式和动画。 文本的每个“段”都有自己的风格，带有文本轮廓和发光效果。 这是一个很好的示例，说明如何使用setTimeout()设置主页样式以按顺序为文本设置动画。

7. 捕捉 SVG

开源的 Snap.svg 库让任何人只需一点代码即可创建高分辨率 SVG 图像。 这比学习 Illustrator 之类的程序要容易得多，它可以让您像 Alexis Blondin 创建的这个有趣的示例一样制作动画。

所有字母都是通过 JavaScript 动态创建的，包括动画中使用的随机字符。 现代 SVG 支持巨大，这些图像类型可以从根本上改变我们在未来几年构建网站的方式。 这个 Snap.svg 动画只是一个例子，它绝对是一个很酷的动画。

8.括号动画

这是我经常看到的另一种相当常见的文本动画技术。 它使用带有旋转文本的括号，几乎就像页面上的rolodex。

这个动画模仿了我之前提到的打字轮播效果，除了这可以只用 CSS 来制作。 它依赖于从一个 CSS 关键帧移动到另一个 CSS 关键帧的自定义循环动画，每个帧在旋转文本中显示不同的单词或短语。

我发现这种效果更微妙，更容易在主页上阅读。 如果您正在为您的主页寻找一些很酷的文本效果，这将是一个很好的选择。

9.坚不可摧的基米施密特

这种甜美的标志效果是从 Netflix 系列《坚不可摧的基米施密特》中借来的。 一切都是用 CSS 创建的，包括文本样式和自定义动画。

页面主体有一个启动动画的类，这个类使用 JavaScript 附加到页面。 从那里开始都是纯 CSS。 它主要使用一堆变换来创建令人惊讶的逼真的弹跳效果。

如果您知道如何使用 CSS3，这又是一个例子。

10. 填充 SVG 文本

最后我们来看看这个非常独特的 SVG 填充动画，它使用了盒子阴影和 CSS stroke 属性的组合。

此文本完全使用 SVG 构建，但它也是可选的，因此您可以像常规文本一样复制/粘贴字母。 它完全兼容所有浏览器，并且动画非常微妙，可以适应任何网站。

所有这些文本动画都带来了一些新的东西。 您可能不会发现它们在您自己的工作中都实用或可用，但它们证明了只要方法正确，几乎一切皆有可能。