纯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">Rookie-Front end learning</p>

效果:

Rookie-Front end learning

温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:18.218.189.173,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.ooize.com/pure-css-to-achieve-typing-effect.html
订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Popup Image

通知

本站原则上是免费提供技术支持,但是服务器维护和运营成本高,可以实行自由赞助:赞助

Loading...