我如何使文本展开作为网站加载?

Question

如何使文本在登录页面加载时展开(就像在打字机上一样)?

Answer 1

是的，你可以通过在文本中添加一个打字动画来轻松做到这一点。我添加了一个示例代码片段和参考。请随意使用。

.container {
display: inline-block;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation: typing 1s steps(20, end) forwards;
}

<div class="container">
<div class="typed-out">NewFace12</div>
</div>

参考:https://www.sitepoint.com/css-typewriter-effect/