本文最后更新于 749 天前,其中的信息可能已经有所发展或是发生改变。
经常看到别人网站上的打字效果,但无奈经常遇见被不可逆混淆的 JS 代码导致无法借鉴学习,效果是挺不错,但看不到 JS 源码和就很无奈。其实我们可以不用一行 JS 代码,只用纯 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">不用一行 JS 的纯 CSS 打字机效果</p>
DEMO
不用一行 JS 的纯 CSS 打字机效果
效果见上?