css3 写字 动画效果 |css毛玻璃登录

// HTML 代码
<h1>Hello World</h1>
// CSS 代码
h1 {
font-size: 6em;
animation: typing 6s steps(60, end), blink-caret .75s step-end infinite;
white-space: nowrap;
overflow: hidden;
border-right: 1px solid;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}

上面的代码中，首先使用了一个 h1 标签，并设置了字体大小为 6em。接着使用了两个 keyframes 来实现这个动画，分别是 typing 和 blink-caret。

typing 这个关键帧从 width: 0 变化到 width: 100%，对应的动画时间为 6s，步数为 60，步数越多表示动画越流畅。

blink-caret 这个关键帧是用来控制光标的闪烁效果的，用黑色边框表示光标，没有边框则表示光标闪烁完成。这个关键帧对应的动画时间为 0.75s，使用 step-end 表示闪烁完成后无需回退。

最后设置了文字不换行且超出部分隐藏，以及边框右侧有一条竖线表示光标。

运行以上代码，就可以看到 Hello World 在 6s 内逐个字母打印出来的动画效果。