网页文字打字机效果插入一段文字(逐字出现循环回退删除)

阿豪运维笔记 04-11 301阅读

温馨提示:这篇文章已超过44天没有更新,请注意相关的内容是否还可用!

看了一些个人博客网站侧边栏和底部信息介绍有打字机效果,高大上很神奇,于是百度了下发现可以用typed.js来实现打字机效果,开箱即用,高大上!!

效果预览

image.png

安装教程

1、首先以下代码放在html页面的网站(你想放的地方)

说明:这段代码要放在js代码前面不然会生效

<span id="Typed"  style="color: #3f7fe0;" ></span>

说明: style="color: #3f7fe0;" 为设置字体颜色代码

JS代码如下:代码放在网站底部</body>之前即可(放在js里面记得取消<script></script>)

<script src="https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js"></script>
<script language=javascript>
    var typed = new Typed("#Typed", {
    strings: ["用行动去思考,去改变、去创造。","Take action to think, to change, to create."],
    startDelay: 200,
    backDelay: 2000,
    typeSpeed: 100,
    loop: true,
    backSpeed: 20
    })
</script>

说明:strings: ["用行动去思考,去改变、去创造。","Take action to think, to change, to create."], 这个里面的文字可以修改

最后效果图如下

dongtu.gif


文章版权声明:除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

Zblog如何自定义后台登入地址

网站如何设置动态标题

Flv西瓜播放器(XGPlayer-flv)视频代码如何调用

个人网站如何添加添加时光轴记录页面

友情链接如何自动获取并添加favicon.ico小图标

ThinkPHP3.2的Runtime/Logs目录下产生大量Log文件的解决办法

分享一个自己在用的Hopelee · 希望(心动之选)主题一些美化设置

分享一个抖音超火的2021国庆节国旗头像生成工具

取消
微信二维码
微信二维码
支付宝二维码