纯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地址:3.137.148.226,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.lilianhua.com/pure-css-to-achieve-typing-effect.html

文澜千文文澜千文Beta

请登录以使用此功能。

Loading...