我们经常看到别人网站上的一个字符逐个出现的打字效果,效果真的挺不错的,其实我们完全可以利用纯css实现网页打字效果。

纯css实现网页打字效果

CSS部分如下:

.print{

width:1000px;

white-space:nowrap;

overflow:hidden;

-webkit-animation: dy 3s steps(60, end) infinite;

animation: dy 3s steps(50, end) infinite;

}

@-webkit-keyframes dy{

from { width: 0;}

}

@keyframes dy{

from { width: 0;}

}
调用:

<p class=”print”>纯css实现网页打字效果,请在这里添加文字,丸子汤博客(https://mifr.cn/)谢谢你的支持!</p>

发表评论

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