零基础建站培训教程介绍

当前位置:

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代码就可以实现网站文字打字效果,我们自己做网站时,也可以使用上面的代码来实现这种效果。

发表评论

电子邮件地址不会被公开。 必填项已用*标注