纯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

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

  5. avatar

    果然好帅~

  6. avatar

    确实太帅了~~
    让我想起了这个。。。。http://geektyper.com/

  7. avatar

    这是css3了吧?!

  8. avatar

    太帅了

  9. avatar

    真的帅吗?

  10. avatar

    css3吗?还没学到,以后研究下,很有意思

  11. avatar

    从良未遂太帅了

  12. avatar

    纯支持

  13. avatar

    你这个代码操作示范,真帅呆了

  14. avatar

    不错

  15. avatar

    前来拜读,希望能和博主成为朋友,互相学习交流。会常来的,望能回访~

  16. avatar

    从良未遂太帅了

  17. avatar

    不错,准备折腾一下。

    • avatar

      @Xinsenz 你的副标题可以用这个效果:生命在于折腾!记录点滴生活。石の上にも三年!

  18. avatar

    我竟然忘了评论框是过滤标签的 :arrow:

  19. avatar

    world太帅了我也来试试 :grin:

世界有你更精彩!

与 从良未遂 联络感情