给字母“i”上的点添加动画的技巧

诀窍在于：通过结合土耳其语字母“ı”和句号“.”，我们可以创建一个看起来像字母“i”的东西，但它由两个独立的元素组成。 这为我们提供了一些有趣的选项，可以独立于字母的主干来设置字母点的样式或对其进行动画处理。 担心可访问性？ 不用担心，我们会尽我们所能解决这个问题。

让我们看看如何创建和设置这些独立的“字母”的样式，并了解何时可以使用它们，以及何时应避免使用它们。

查看一些示例

以下是一些我们可以使用此想法实现的不同样式和动画

查看 CodePen 上 Ali C (@alichur) 编写的笔
样式和动画。
在 CodePen 上。

由于字母的两个部分都是常规的 Unicode 字符，因此它们将像任何其他文本一样尊重字体更改并进行页面缩放。 以下是一些不同字体、样式和缩放级别的示例

查看 CodePen 上 Ali C (@alichur) 编写的笔
不同的字体和缩放。
在 CodePen 上。

逐步了解该技术

让我们分解一下此技术的工作原理。

选择要组合的 Unicode 字符

我们使用的是无点“i”字符 (ı) 和句号。 而且，是的，我们也可以使用其他字符，例如无点“j”字符 (ȷ) 或甚至“ñ”(~) 或“è”(`) 等字符上的重音符号。

通过将它们包装在 span 中并将 display 属性设置为 block，将字符堆叠在一起。

<span class="character">.</span>
<span class="character">ı</span>

.character {
  display: block;
}

对齐字符

它们需要彼此靠近。 我们可以通过调整行高并删除它们的边距来做到这一点。

.character {
  display: block;
  line-height: 0.5;
  margin-top: 0;
  margin-bottom: 0;
}

向点元素添加 CSS 动画

类似于这种弹跳动画

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -10px, 0);
  }
}

.bounce {
  animation: bounce 0.4s infinite alternate;
}

在 CSS-Tricks 年鉴中 还有更多关于 CSS 动画的信息。

检查一下，到目前为止我们已经完成了哪些工作

查看 CodePen 上 Ali C (@alichur) 编写的笔
创建字母。
在 CodePen 上。

添加单词中剩余的任何字母

可以单独为“i”添加动画，但它可能只是一个单词中的一个字母，例如“Ping”。 我们将把动画字符包装在一个 span 中，以确保所有内容都保持在同一行上。

<p>
  P
  <span>
    <span class="character">.</span>
    <span class="character>ı</span> 
  </span>
  ng
</p>

内联块元素之间存在 自动间隙，因此如果间距看起来不对，请确保将其删除。

最后阶段

查看 CodePen 上 Ali C (@alichur) 编写的笔
在单词中添加字母。
在 CodePen 上。

SVG 怎么样？

通过从两个或多个 SVG 元素创建字母，可以实现相同的效果。 这是一个示例，其中圆形元素与矩形元素独立地进行动画处理。

查看 CodePen 上 Ali C (@alichur) 编写的笔
SVG 动画 i。
在 CodePen 上。

虽然 SVG 字母不会响应字体更改，但它为对 Unicode 字符未表示的字母部分和任何字体中都不存在的字母样式进行动画处理提供了更多可能性。

您会在哪里使用它？

您想在哪里使用这样的东西？ 我的意思是，它不是正文内容或任何长篇内容的理想用例。 这不仅会影响可读性（想象一下，如果这篇文章中的每个“i”都带有动画？），而且还会对辅助技术（如屏幕阅读器）产生负面影响，我们将在后面讨论。

相反，最好在内容旨在用于装饰的地方使用此技术。 徽标就是一个很好的例子。 或者可能是在图标中，该图标旨在进行描述，但辅助技术不会将其解释为文本。

让我们谈谈可访问性

回到我们的“Ping”示例，屏幕阅读器会将其读作 P . ı ng。 这不是我们想要的读音，对于任何聆听它的人来说都绝对令人困惑。

根据使用情况，可以添加不同的 ARIA 属性以使文本以不同的方式读取。 例如，我们可以将整个元素描述为图像并添加文本作为其标签

<div role=img aria-label="Ping">
  <p>P<span>.</span><span>ı</span>ng</p>
</div>

这样，外部 div 元素描述了屏幕阅读器读取的文本的含义。 但是，我们也希望辅助技术跳过内部元素。 我们可以向它们添加 aria-hidden="true" 或 role="presentation"，以便它们也不会被解释为文本

<div role=img aria-label="Ping">
  <p role="presentation">P
    <span>.</span>
    <span>ı</span>
  ng</p>
</div>

这仅在使用 Safari 中的 VoiceOver 的 Mac 上进行了测试。 如果在其他辅助技术中存在问题，请在评论中告知我们。

更多 Unicode！

通过组合 Unicode 字符，我们可以创建更多“字母”。 这里有一个 常用字形的完整概述，或者您可以使用以下内容进行一些有趣的尝试，并在评论中分享您的创作。 但请记住：没有任何炫酷的效果值得在生产网站上损害可访问性！

第一个字形	第二个字形	组合
ı	.	i
ȷ	.	j
n	~	ñ
a	e	æ
a	`	à