纯css实现网页打字效果

我们经常看到别人网站上的一个字符逐个出现的打字效果,效果真的挺不错的,其实我们完全可以利用纯css实现网页打字效果。
CSS部分如下:
.print{ width:1000px; white-space:nowrap; overflow:hidden; -webkit-animation: dy 3s steps(50, end) infinite; animation: dy 3s steps(50, end) infinite; } @-webkit-keyframes dy{ from { width: 0;} } @keyframes dy{ from { width: 0;} }
如果不想重复打字,在css里的print 样式属性animation和-webkit-animation
最后参数改为1就行,如下
-webkit-animation: dy 3s steps(50, end) 1; animation: dy 3s steps(50, end) 1;
html调用:
<p class="print">纯css实现网页打字效果,请在这里添加文字。。。。</p>
以下为全部代码:



本文作者:起点终站
文章标题: 纯css实现网页打字效果
本文地址:https://blog.hellozwh.com/?post=215
版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
本文地址:https://blog.hellozwh.com/?post=215
版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。


