代码实现动画跳动字母“ i”样式

诀窍是:将土耳其语字母“ı”和句点“。”组合在一起 我们可以创建看起来像字母“ i”但由两个单独的元素组成的东西。这为我们提供了一些有趣的选项,可以独立于茎进行样式化或动画化字母点。担心可访问性?不用担心,我们将介绍我们所知的最佳方式。

让我们看看如何创建和设置这些单独的“字母”的样式,以及何时可以使用它们以及何时避免使用它们。

#看看一些例子

这是我们可以用这种想法做的一些不同的样式和动画:

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

#逐步介绍这项技术

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

选择要组合的Unicode字符

我们正在使用无点“ i”字符(ı)和句号。而且,是的,我们也可以使用其他字符,例如无点的“ j”字符(ȷ)或什至在诸如“ñ”(〜)或“è”(`)之类的字符上的重音符号。

通过将字符包裹在一个范围内并将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动画添加到dot元素

像这样的反弹动画:

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

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

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

《 CSS技巧年鉴》中有关于CSS动画的更多信息。

签到,这是我们到目前为止的位置:

添加该单词的所有剩余字母

单独给“ i”设置动画是很好的,但是也许只是一个单词中的一个字母,例如“ Ping”。我们将把动画角色包装在一个跨度中,以确保所有内容都停留在一行上。

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

内联块元素之间有一个自动间隙,因此,如果间距很小,请确保将其删除。

最后阶段:

#SVG呢?

通过从两个或更多SVG元素创建字母可以实现相同的效果。这是一个示例,其中圆形元素的动画独立于矩形元素。

尽管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>
免责声明: 本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
侵删请致信站长

西楼网 » 代码实现动画跳动字母“ i”样式