以前要达到类似在电脑上打字的效果,需要 js+html
。今天我将介绍一种新方法。本文主要介绍纯 html+css
实现打字效果,有一定的参考价值,大家可以学习一下。提供所有代码,可以直接使用。
一、原理分析
可以将动画看做三个不同的层次:
- 最底层的文字
- 中间挡住文字的背景
- 最上层的光标
文字是静止的,而中间的背景和最上层的光标是动态的。
初始时,背景挡住所有的文字,光标在最左边。
动画进行时,背景和光标以相同的步伐从左往右移动。
动画结束时,背景不再遮挡文字,光标则在最右边闪烁。
这种实现唯一的好处是不需要 js,但缺点是只能用于一行文本,多行文本理论上可以实现,但是比较麻烦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ty