纯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
文章链接:https://www.ooize.com/pure-css-to-achieve-typing-effect.html
订阅
登录
0 评论