纯css实现打字效果

以下几行代码可以实现纯css实现打字机的效果。

css部分:

.print{
    width:250px;
    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;}
}

html部分:

<p class="print"></p>

实际效果:

从良未遂太帅了!



文章ID:886 。转载请注明:http://www.ithmz.com » 纯css实现打字效果

本人五毒俱全且有严重暴力倾向,现实生活中建议远离,否则后果自负。

《纯css实现打字效果》上有 28 条评论

  1. avatar

    CSS动画相比JS要好实现得多,效果还很好。

  2. avatar

    这个CSS很好啊,找机会八一八!

  3. avatar

    我用的模版上,导航栏下公告就是这样子,不过我没仔细研究。

  4. avatar

    帅哥,如何实现,我想变帅~

世界有你更精彩!

与 从良未遂 联络感情