仅使用 CSS 的多行打字机效果

继可扩展的单行打字机和疯狂的“拼字游戏”打字机之后，让我们再做另一个：多行打字机。

当然是仅使用 CSS 的解决方案：

效果取决于使用等宽字体并了解字符数。是的，我先说说它的缺点，但这就是为了通用且易于使用的代码所付出的代价。

HTML 非常简单：

This is a <span class="type" style="--n:53">CSS only solution for a multi-line typewriter effect.</span>

一个包含我们的文本和字符数的跨度作为变量。

对于 CSS：

.type {
  font-family: monospace;
  color:#0000;
  background:
    linear-gradient(-90deg,#00DFFC 5px,#0000 0) 10px 0,
    linear-gradient(#00DFFC 0 0) 0 0;
  background-size:calc(var(--n)*1ch) 200%;
  -webkit-background-clip:padding-box,text;
  background-clip:padding-box,text;
  background-repeat:no-repeat;
  animation: 
    b .7s infinite steps(1),   
    t calc(var(--n)*.3s) steps(var(--n)) forwards;
}
@keyframes t{
  from {background-size:0 200%}
}
@keyframes b{
  50% {background-position:0 -100%,0 0}
}

几行 CSS 代码，没有硬编码值。我们只需要更新变量--n。

它是如何工作的？

这个技巧依赖于背景属性，因此作为参考，我总是推荐这篇文章：

关于 background-position 你需要知道的一切

Temani Afif 为《这就是学习》撰稿 ・ 2021 年 3 月 13 日

#webdev #tutorial #beginners #css

我们有两个背景图层。第一个图层用于为文本着色，第二个图层用于创建闪烁的插入符号。

第一层的想法是应用离散动画，background-size使用渐变着色创建从第一个字符到最后一个字符的填充效果。

以下是一步一步的说明，帮助您理解这个技巧：

第二层是我们的插入符号。这里我们将执行两个动画。第一个动画background-size类似于文本着色，因为插入符号需要跟随文本移动。第二个动画用于background-position创建闪烁效果。

再一步步理解：

插入符号的宽度由5px渐变内部控制，我们添加了一个小的偏移量（10px）以避免与文本动画重叠。

就是这样！想象一下两个图层同时动画，我们就得到了纯 CSS 的打字机效果。

✔️ 无需 JavaScript
✔️ 简单的 HTML 代码
✔️ 无需复杂的 CSS 代码。声明少于 10 个，且无硬编码值
✔️ 易于访问。文本写在 HTML 代码中（无伪元素，无重复文本）
❌ 需要等宽字体
⚠️ 您可以使用任何文本而无需更改代码，但必须更新一个变量

或者