index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>typing-demo</title>
<link rel="stylesheet" type="text/css" href="./css.css">
</head>
<!--设置margin为0清除body边界，不至于出现滚动条-->
<body style="margin: 0;">
<div class="wrapper">
<div class="typing-demo">
This is a Typing Demo.
</div>
</div>
</body>
</html>
css.css
.wrapper {
height: 100vh;/*1vh就是当前浏览器窗口可见高度的1%，100vh就是该元素高度是浏览器高度的100%*/
display: flex;/*flex布局，Flex是Flexible Box的缩写，意为"弹性布局"*/
align-items: center;/*弹性盒子元素在该行的侧轴（纵轴）上居中放置*/
justify-content: center;/*元素在主轴（页面）上居中排列*/
}
.typing-demo{
width: 22ch;/*1ch就是数字0的宽度*/
/*steps(22)把动画分成22份，
step-end 等同于 steps(1,end) ，动画分成 1 步，动画执行时以结尾端点为开始
animation-iteration-count:infinite,动画不停执行
animation-direction 值是 "alternate"，则动画会在奇数次数正常播放，而在偶数次数向后播放。
*/
animation: typing 2s steps(22),blink .5s step-end infinite alternate;
white-space: nowrap;/*段落中的文本不进行换行*/
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;/*1em=元素中文本的1个垂直高度*/
}
@keyframes typing{
from{
width: 0;
}
}
@keyframes blink {
50%{
border-color: transparent;
}
}