Typed.js打字效果js库的几种应用方式(7)

fox/ 2023年04月06日/ 开源推荐/ 浏览 2044

之前我们分享过一个有趣而简单的动态打印字体插件——typed.js

关于typed.js,可以了解这篇文章

一个有趣而简单的动态打印字体插件——typed.js

这里我们会陆续给给大家说一下,Typed.js的几种实际应用方法,多掌握一些简单的前端技巧

1.基础应用,在静态HTML中使用(对 SEO 友好)
2.简单暂停打字效果
3.智能退格效果

4.在input中应用打字效果

5.洗牌效果

6.批量打字

7.自定义CSS展示及CSS动画

自定义CSS及CSS动画是在typed.js的JavaScript初始化的基础上构建的。但是,您可以根据自己的意愿进行定制!例如:


<div id="typed-strings" class="typed-cursor">
<p class="typed-fade-out">Typed.js is a <strong>JavaScript</strong> library.</p> <p class="typed-fade-out">It <em>types</em> out sentences.</p> </div> <span id="typed"></span>

我们可以通过css自定义指针样式,及css动画展示


/* 鼠标指针 */
.typed-cursor {
    cursor: wait;
}

/* 淡入淡出效果 */
.typed-fade-out {
    transition: transform 0.5s;
}

/* 以上仅做参考,可结合自己实际应用情况自定义css展示样式及动画效果 */


发表评论

暂无评论,抢个沙发...

客服 工单