仅使用几行HTML代码实现炫酷打字机效果

本节课程中海海会带大家使用 HTML 和 CSS 来制作一个如下图效果所示的打字机。

图片说明

在线演示戳这里 👉 https://haiyong.site/demo/daziji/

正如你所见，页面中从光标位置开始可以自动打印出一行文字，是不是很神奇呢？代码也比较简单，我们快去一探究竟吧！

知识点

margin 属性
background-color 属性
overflow 属性
font-size 属性
@keyframes 属性

基本 HTML 结构

本节实验项目结构如下：

├── index.html

创建 HTML 基本框架，修改title标签中的内容。

<!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>使用 CSS 制作打字机</title>
  </head>
  <body></body>
</html>

使用 CSS 设计网页

首先，我们使用 CSS 代码来设计网页，我们要用到以下三个属性：

margin属性是外边距，即元素距上级元素或相邻兄弟元素的距离。该属性可以有 1 到 4 个值，详情见： MDN margin 属性
background-color属性设置元素的背景颜色。
font-size属性可设置元素中文字的大小。

图片说明

在...标签中添加 CSS 代码：

html {
  margin: 0;
}
body {
  background-color: black; margin: 0;
  margin-left: 5%;
}

添加输入的文本行

现在我们的页面上还没有内容，我们需要在body中添加一行文字，就是我们可以自动打印出来的那段文字。

I am a web learner

此时文字只是显示到了页面上，那么我们怎么让文字呈现一个字符一个字符的输入呢？

我们需要来认识两个新属性：

overflow属性规定当内容溢出元素框时的显示效果。详情见：MDN overflow 属性
animation属性用于设置元素的动画效果，它是一个简写属性，包含六个值，分别是animation-name（动画名字），animation-duration（动画周期），animation-timing-function（每个动画周期的执行节奏），animation-delay（动画延时时间），animation-iteration-count（动画迭代次数），animation-direction（动画是否反向播放），animation-fill-mode（动画执行前后应用目标的方式）和animation-play-state（动画是否运行或暂停）。详情见：MDN animation 属性

我们将字体设置为50px，字体大小设置为50px，字体颜色设置为白色。

使用overflow: hidden和white-space: nowrap来隐藏溢出字符。

代码如下：

#typing {
  color: white;
  float: left;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 50px;
  margin-top: 20%;
  margin-left: 20%;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 5s steps(22) 1s infinite alternate;
}

我们把输入文本的颜色设置为绿色，这样在黑色背景上看起来会更亮丽一点。

#typing span {
  color: rgb(79, 255, 35);
}

效果如下所示：

图片说明

将光标添加到文本类型动画

为了让这个打字动画显得更加真实有趣，这里我添加了光标，我所使用的光标颜色也是绿色，大小为50像素。

完整的 HTML 代码如下：

I am a web learner
|

CSS 代码如下：

#crow {
  float: left;
  margin-top: 20%;
  color: rgb(79, 255, 35);
  font-family: consolas;
  font-weight: bold;
  font-size: 50px;
  animation: crow 0.5s linear 0s infinite;
}

效果如下所示：

图片说明

使用 CSS3 激活动画

接下来我们使用@keyframes为输入的文本添加动画。

创建动画的原理是将一套 CSS 样式逐渐变化为另一套样式。以百分比来规定改变发生的时间，或者通过关键词from和to，其等价于0%和100%。0%是动画的开始时间，100%动画的结束时间。详情见：MDN @keyframes 规则

在文件中添加以下代码：

@keyframes typing {
  from {
    width: 0ch;
  }
  to {
    width: 15ch;
  }
}

最终效果如下：

图片说明

到这里我们的自动打字机就完成了，这里我给出了完整的源代码，同学们可以复制下来试一试

<!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>使用 CSS 制作打字机</title>
        <style>
            html {
                margin: 0;
            }

            body {
                background-color: black;
                background-size: cover;
                background-repeat: no-repeat;
                margin: 0;
                margin-left: 5%;
            }

            #typing {

                width: 0ch;
                color: white;
                float: left;
                font-family: sans-serif;
                font-weight: bold;
                font-size: 50px;
                margin-top: 20%;
                margin-left: 20%;
                overflow: hidden;
                white-space: nowrap;
                animation: typing 5s steps(22) 1s infinite alternate;
            }

            #typing span {
                color: rgb(79, 255, 35);
            }

            #crow {
                float: left;
                margin-top: 20%;
                color: rgb(79, 255, 35);
                font-family: consolas;
                font-weight: bold;
                font-size: 50px;
                animation: crow 0.5s linear 0s infinite;
            }

            @keyframes typing {
                from {
                    width: 0ch;
                }

                to {
                    width: 16ch;
                }
            }

            @keyframes crow {
                from {
                    opacity: 0;
                }

                to {
                    opacity: 1;
                }
            }
        </style>
    </head>
    <body>
        <div id="typing">I am a <span>web learner</span></div>
        <div id="crow">|</div>
    </body>
</html>