打字机，但没有 HTML、CSS 或 JS？！

显然，开发人员之间爆发了一场争夺“最佳打字机动画师”称号的战斗。

• @alvaromontoro从CSS 中的打字机效果开始
• @afif然后给了我们一个可扩展的 CSS 打字机效果
• @inhuofficial 承诺给我们提供一款仅支持 HTML 的打字机
• @alvaromontoro带着一台动画无元素打字机回来了

在这种典型的争强好胜的精神下，某个地方的某个人承担起这项最具传奇色彩的任务只是时间问题：为网络创建打字机动画，无需使用任何脚本。无需 Javascript。无需 CSS。甚至无需 HTML。

瞧，可缩放矢量图形的威力。

好吧，不过如果你想要打字机动画的话，其实就别用这个了！它有浏览器兼容性和可访问性问题，但至少是个可爱的实验。

工作原理

SVG 规范中有一种称为同步多媒体集成语言(SMIL) 的东西，它允许直接在 XML 文档中定义动画。

例如，考虑动画标签。当它成为某个形状的子项（例如）时rect，您可以选择随时间变化的动画属性，并指定其变化方式。

举例来说，只需调整 0 到 1 之间的矩形宽度，并离散地进行调整，即可为文本光标提供简单的闪烁动画，使其闪烁：

<rect fill="black" x="0" y="4" width="1" height="12">
  <animate
    attributeName="width"
    calcMode="discrete"
    values="1; 0"
    dur="1s"
    repeatCount="indefinite" />
</rect>

这是我第一次使用 SMIL，所以几乎可以肯定，比我聪明的人可以找到比调整覆盖的白色矩形更好的方法！