纯 CSS 代码实现打字机效果

经常看到别人网站上的打字效果,但无奈经常遇见被不可逆混淆的 JS 代码导致无法借鉴学习,效果是挺不错,但看不到 JS 源码和就很无奈。其实我们可以不用一行 JS 代码,只用纯 CSS 实现打字效果。

CSS代码

.print{
    width:1000px;
    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;
    }
}

调用方式

Demo

不用一行 JS 的纯 CSS 打字机效果

温馨提示: 本文最后更新于2022/10/18 17:39:28若文章内容或图片失效,请留言联系站长反馈!
!
也想出现在这里? 联系我们
创意广告
© 版权声明
THE END
点赞0赞赏 分享
评论 共2条

请登录后发表评论

    请登录后查看评论内容