纯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.219.53.175,归属地:俄亥俄州Dublin ,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/pure-css-to-achieve-typing-effect.html
订阅
提醒
guest
0 评论
内联反馈
查看所有评论
Loading...