前端笔记——Typed.js实现打字机效果
利用Typed.js插件实现前端文字打字机效果。通过修改配置参数,可以实现不同的文本打字效果。
·
可以使用Typed.js插件来实现前端文字打字机效果。下面是具体的实现步骤:
-
在HTML文件中导入Typed.js的脚本文件。
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.min.js"></script>
-
创建一个容器,用于展示文本。
<span class="box"></span>
-
在JavaScript文件中创建Typed实例,并配置相关参数。
<span class="box"></span>
<script>
var typed = new Typed(".box", {
strings: ["👋Hello!","🪄Welcome to Cakndex's Blog"],
typeSpeed: 50,//打字的速度
smartBackspace: true, // 开启智能退格 默认false
backSpeed: 100,//后退速度
backDelay: 500,//后退延迟
loop:false,//是否循环 默认false
startDelay:1000,//起始时间
fadeOut:true,//淡出效果
});
</script>
效果如图:

以上就是利用Typed.js插件实现前端文字打字机效果的步骤。通过修改配置参数,可以实现不同的文本打字效果。
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)