height: 100vh;
这里的height: 100vh;表示100%窗口（浏览器窗口）高度，而height: 100%;是相对付父元素的高度，当父元素高度未被定义时则height: 100%;不会生效；在实现全屏或类似效果时height: 100vh;比较适宜。
display: flex;justify-content: center;align-items: center;
这里利用的是弹性布局，让元素水平垂直居中展示。
.content::before { content: 'hello world'; position: absolute; left: 0; top: 0; color: #eeea06; width: 60px; white-space: nowrap; overflow: hidden; border-right: 5px solid #eeea06;}
这里利用到伪元素::before，表示用来创建一个内部元素，它的内容会覆盖在父元素的内容之前，即实现涂抹样式效果。个中，white-space: nowrap;表示合并文本中的空格但不换行，常常会和overflow、text-overflow搭配利用，这里的overflow: hidden;则是溢出隐蔽，即超出设定的宽度，那么超出的部分将会被隐蔽，不占位。
filter: drop-shadow(0 0 50px #eeea06);
这里利用到filter属性中的drop-shadow函数给文本加上阴影发光效果。
@keyframes move { 0% { width: 0; } 100% { width: 100%; }}
这里是创建动画并定义关键帧，%：表示动画进度，0%为动画开始，100%为动画结束。在这两个值之间可以定义任意数量的关键帧，浏览器会根据这些关键帧的样式逐渐过渡。个中，通过设置width属性的值来完成笔墨的涂抹效果。
animation: move 5s linear infinite;
创建完关键帧动画后，要使其生效，则需指定动画的时长和其他参数，这里实现的效果是动画时长为5秒，线性过渡并无限次播放；
