背景

背景是博主所在项目中有一模块是关于智能AI客服的功能，上面要求增加更多的特效。其中打字机逐一显示文字的特效自然是不能少的。

之前也经常刷短视频刷到过这个特效的实现，原理也大致知晓。因此准备实现一下，并以最简单的方式呈现。方便后续参考使用。

实现

核心功能代码其实并不复杂，一段样式+动画几可实现。可直接参考以下源码。

源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <style>
        .typer span {
            color: transparent;
            background-image: linear-gradient(to right, #884eef, #0cffc2, #009bff);
            background-repeat: no-repeat;
            background-clip: text;
            -webkit-background-clip: text;
            background-size: 100% 100%;
            animation: typer_anim 2s linear;
	              white-space: pre-wrap;
            display: inline;
        }

        .typer.infinite span {
            animation-iteration-count: infinite;
        }

        @keyframes typer_anim {
            0% {
                background-size: 0% 100%;
            }
            100% {
                background-size: 100% 100%;
            }
        }
    </style>
</head>
<body>
<div class="typer" style="width: 100px">
    <span>我是一串打字机效果的段落，我可以逐一显示文字。</span>
</div>
<div class="typer infinite" style="width: 100px">
    <span>我是一串打字机效果的段落，我可以逐一显示文字。且一直重复效果</span>
</div>
</body>
</html>

效果

尊重作者，转载请注明出处！

版权申明：本文版权归作者所有，未经授权，任何单位或个人不得以任何形式转载、摘编或利用其它方式使用本博客内容。作者保留追究相关法律责任的权利。如需使用博客内容，请与作者联系获得授权。感谢对本文的尊重与支持。

免责声明：本网站所载内容仅供参考，不构成任何专业建议。用户基于本网站内容作出的决策，风险自担。对于因使用本网站内容而产生的任何直接或间接损失，本网站不承担任何责任。请用户审慎判断，理性使用。

使用CSS实现流光打字机效果

背景

实现

源码

效果

相关推荐