纯css实现打字效果

AI摘要
Deepseek提供支持

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

广告
广告图片
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;来自:俄亥俄州·哥伦布 ,欢迎您的访问!
文章链接:https://www.lilianhua.com/pure-css-to-achieve-typing-effect.html
请先登录才能参与答题
距本场结束剩 00 00 00 00
轻量应用服务器 2核2G
200M峰值带宽,适用于网站搭建、Web应用、容器环境、电商独立站等
立即前往
扫码进入
扫描二维码购买
文澜千文

文澜千文

请登录以使用此功能。

|
孕味食足苏打饼干0蔗糖苏打饼干海盐味260g孕妇零食 孕味食足苏打饼干0蔗糖苏打饼干海盐味260g孕妇零食
弹窗图片

Linux AI

记不住繁琐的Linux参数?让AI为你精准检索!输入你的需求,一秒锁定标准命令,彻底告别搜索引擎的冗长翻找。

Loading...

请您留言

如有任何关于本站的任何问题,欢迎联系我们,我们会第一时间为您解答。

客服
联系客服咨询

Hi,如果对于本站的任何问题你都可以在此联系到我们,我们会第一时间为您解。

关注微信公众号
QQ联系
立即联系客服
1546482882
lee@8i5.net