经常看到别人网站上的打字效果，但无奈经常遇见被不可逆混淆的 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 打字机效果

效果见上?