CSS3实现网站文字打字效果
我们做网站时,经常看到有些网站上会有文字打字效果,就是一段文字不是直接显示,而是一个字一个字自动打出来的。实现效果如下图:
怎么实现这种网站文字打字效果呢?使用CSS3就可以实现。代码如下:
<p>CSS3实现网站文字打字效果</p>
<style>
@keyframes cursor {
50% {
border-color: transparent;
}
}
@keyframes text {
from {
width: 0;
}
}
p {
width: 35ch;
border-right: solid 1px #000;
white-space: nowrap;
overflow: hidden;
font: 28px monospace;
animation: cursor 1s infinite step-end, text 4s steps(35);
}
</style>
就是这么简单的CSS代码就可以实现网站文字打字效果,我们自己做网站时,也可以使用上面的代码来实现这种效果。