html + css 实现无需 js 的打字效果

以前要达到类似在电脑上打字的效果，需要 js+html。今天我将介绍一种新方法。本文主要介绍纯 html+css 实现打字效果，有一定的参考价值，大家可以学习一下。提供所有代码，可以直接使用。

一、原理分析

可以将动画看做三个不同的层次：

1. 最底层的文字
2. 中间挡住文字的背景
3. 最上层的光标

文字是静止的，而中间的背景和最上层的光标是动态的。

初始时，背景挡住所有的文字，光标在最左边。

动画进行时，背景和光标以相同的步伐从左往右移动。

动画结束时，背景不再遮挡文字，光标则在最右边闪烁。

这种实现唯一的好处是不需要 js，但缺点是只能用于一行文本，多行文本理论上可以实现，但是比较麻烦。

代码

  
  
  
  
  


hello,world!

二、javascript 实现打字效果 1

  
  
  
  


hello,world!

三、javascript 实现打字效果 2

  
  
  



  In the past, to achieve an effect similar to typing on a computer, js+html was required. Today I will introduce a new method.This article mainly


  In the past, to achieve an effect similar to typing on a computer, js+html was required. Today I will introduce a new method.This article mainly introduces pure html+css to achieve typing effect, which has certain reference value, you can learn about it. Provide all the code, you can use it directly.