vue3项目使用TypeIt打字机

官网: TypeIt | The most versatile JavaScript typewriter effect library on the planet.

下载: npm i typeit 

使用方法:

正常打字

多行打字机

input输入框实现打字机效果

打字机颜色变化

删除,光标移动,最全面的打字机效果

官网最下面还可以输入你想有的打字效果,然后生成代码

录屏2023-10-23 14.27.03

实际炫酷效果展示:

录屏2023-10-23 14.32.44

代码:

<script setup>
import { ref, reactive, onMounted } from 'vue'
onMounted(()=>{new TypeIt("#simpleUsage", {strings: ["This is a simple string.","This is a simple stringasdf","This is a simple stringasdfafs"],speed: 50,waitUntilVisible: true,}).go();
})
import TypeIt from 'typeit'
</script><template><div><span>这里是typewriter</span><p id="simpleUsage"></p></div>
</template><style scoped lang='less'></style>
<template><span ref="text" class="msg"></span>
</template><script setup>
// https://www.typeitjs.com/docs/vanilla/usage/#configuration-basics
// npm install typeit
import { ref, onMounted } from "vue";
import TypeIt from 'typeit'
const text = ref(null)
onMounted(() => {new (TypeIt)(text.value, {strings: ["你好", "欢迎", "测试测试测试"],cursorChar: "<span class='cursorChar'>|<span>",//用于光标的字符。HTML也可以speed: 100,lifeLike: true,// 使打字速度不规则cursor: true,//在字符串末尾显示闪烁的光标breakLines: false,// 控制是将多个字符串打印在彼此之上,还是删除这些字符串并相互替换loop: true,//是否循环}).go()
})
</script><style scoped>
.msg {color: rgb(88, 88, 88);letter-spacing: 2px;
}.msg ::v-deep .cursorChar {display: inline-block;margin-left: 2px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/116869.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【文件操作】Java -操作File对象

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 文件操作 Java - File对象 Java - File对象 Fi…

计算机视觉-数学基础*变换域表示

被研究最多的图像&#xff08;或任何序列数据&#xff09;变换域表示是通过傅 里叶分析 。所谓的傅里叶表示就是使用 正弦函数的线性组合来表示信号。对于一个给定的图像I(n1,n2) &#xff0c;可以用如下方式分解它&#xff08;即逆傅里叶变换&#xff09;&#xff1a; 其中&a…

【lesson14】进程控制之进程等待

文章目录 为什么要有进程等待&#xff1f;如何等待和什么是等待&#xff1f; 为什么要有进程等待&#xff1f; 1.子进程退出&#xff0c;父进程不管子进程&#xff0c;子进程就要处于僵尸状态------会导致内存泄漏 2.父进程创建子进程是要让子进程办事的&#xff0c;那么子进…

【Tensorflow 2.12 简单智能商城商品推荐系统搭建】

Tensorflow 2.12 简单智能商城商品推荐系统搭建 前言架构数据召回排序部署调用结尾 前言 基于 Tensorflow 2.12 搭建一个简单的智能商城商品推荐系统demo~ 主要包含6个部分&#xff0c;首先是简单介绍系统架构&#xff0c;接着是训练数据收集、处理&#xff0c;然后是召回模型、…

Word Power S

题目描述 约翰想要计算他那N(l < N < 1000)只奶牛的名字的能量.每只奶牛的名字由不超过1000个字 符构成&#xff0c;没有一个名字是空字体串. 约翰有一张“能量字符串表”&#xff0c;上面有M(1 < M < 100)个代表能量的字符串.每个字符串 由不超过30个字体构成&a…

使用.NET设计一个Epub电子书生成工具

1. 背景 可能我们接触到更多的小说文件都是普普通通的TXT格式&#xff0c;用于分享的文档更多的是PDF。TXT虽然轻巧&#xff0c;但是不如PDF丰富和强大。而 Epub 电子书格式因为其丰富的展示效果和较小的文件大小&#xff0c;这样一个微妙的平衡就刚刚好。作为一个喜欢看小说的…

apache开启https

本文基于windows平台。 个人感觉使用apache配置起来比较繁琐&#xff0c;而使用upupw或者xmpp等集成开发工具更方便。 在httpd.conf中&#xff0c;将下一行的注释去掉&#xff1a;LoadModule ssl_module modules/mod_ssl.so。另外&#xff0c;千万不要注释掉下面的一行&#…

How to install mongodb 7.0 to Ubuntu 22.04

How to install mongodb 7.0 to Ubuntu 22.04 1、安装1.1、添加gpg1.2、添加apt源1.3、更新1.4、安装 2、管理2.1、服务管理2.1.1、查看服务状态2.1.2、启动服务2.1.3、 设置服务为开机启动2.1.4、取消服务开机启动2.1.5、关闭服务2.1.6、服务重启 2.2、mongosh2.2.1、进入mong…

“深入探讨Java JUC中的ReentrantLock锁:实现多线程同步与并发控制“

简介 1、从Java5开始&#xff0c;Java提供了一种功能更强大的线程同步机制——通过显式定义同步锁对象来实现同步&#xff0c;在这种机制下&#xff0c;同步锁由Lock对象充当。 2、Lock 提供了比synchronized方法和synchronized代码块更广泛的锁定操作&#xff0c;Lock允许实…

arcgis js api FeatureLayer加载时返回数据带*问题

接着这一问题衍生出来的问题 arcgis的MapServer服务查询出来的结果geometry坐标点带*的问题-CSDN博客 个人感觉像是server版本的问题&#xff0c;具体不清楚&#xff0c;pg数据库里面的shape点集合坐标点的精度是8&#xff0c;但是server服务查出来的默认都十几位。所以存在一…

c_指针

文章目录 *(p1)1表示第 1 行第 1 个元素的地址。如何理解呢&#xff1f;下标运算符的规则括号 int a; // 1.一个整数 int *a; // 2.一个指向整数的指针 int **a; // 3.一个指向指针的指针, 它所指向的指针又指向一个整数型数据 ;一个指向 …

用Python绘制简单曲线的几个方法

画曲线的基本方法 1.用圆的一部分来画曲线&#xff1a; circle(半径&#xff0c;度数) 比如说想画一个半径为50的半圆的曲线&#xff0c;就可以用circle(50,180)来表示 如果想截取一个半径为100的圆中110的部分&#xff0c;就可以用circle(100,110)来表示 若要更改方向&am…

使用CPR库和Python编写程序

以下是一个使用CPR库和Python编写的爬虫程序&#xff0c;用于爬取。此程序使用了proxy的代码。 import requests from cpr import CPR ​ def get_proxy():url "https://www.duoip.cn/get_proxy"headers {"User-Agent": "Mozilla/5.0 (Windows NT …

C语言可变参数函数及其实现

概述 本文讨论C语言中的可变参数函数&#xff0c;特别关注printf和scanf&#xff0c;它们允许根据需要确定参数的个数。这篇文章还介绍了可变参数函数的实现细节和相关宏 1. 可变参数函数的概念 C语言引入了可变参数函数的概念&#xff0c;允许函数的参数个数根据需要确定。…

如何用.bat文件直接安装jar包

大家应该都知道一个maven引入jar包&#xff0c;如果直接把jar包放到目录&#xff0c;这样是没用的&#xff0c;引入还是会失败 这里我们可以创建一个.bat的windows系统文件&#xff0c;写入pom.xml对应的groupid&#xff0c;artifactId&#xff0c;version pom.xml中进入jar包…

RDB.js:适用于 Node.js 和 Typescript 的终极对象关系映射器

RDB.js 是适用于 Node.js 和 Typescript 的终极对象关系映射器&#xff0c;可与 Postgres、MS SQL、MySQL、Sybase SAP 和 SQLite 等流行数据库无缝集成。无论您是使用 TypeScript 还是 JavaScript&#xff08;包括 CommonJS 和 ECMAScript&#xff09;构建应用程序&#xff0c…

Ceres 使用笔记

文章目录 Part.I IntroductionChap.I 预备知识Chap.II 概念理解 Part.II 简单使用Chap.I Ceres 中主要函数简介Chap.II 一个简单的实例 Reference Part.I Introduction Ceres 1 是由 Google 开发的开源 C 通用非线性优化库&#xff0c;与 g2o 并列为目前视觉 SLAM 中应用最广泛…

使用 conda 在 Ubuntu 16.04 上安装 Python 3.9 的步骤:和 VSCode配置

一、使用conda在 Ubuntu 16.04 上安装 Python 3.9 的步骤: 当然可以,conda 是一个非常强大的包管理器,它可以方便地管理不同版本的 Python 和各种库包。以下是使用 conda 在 Ubuntu 16.04 上安装 Python 3.9 的步骤: 1. 安装 Miniconda Miniconda 是 Anaconda 的轻量级版…

k8s-----3、kubernetes集群部署(kubeadm部署)

集群部署 1、kubeadm流程&#xff08;重新配置&#xff09;1.1 安装要求1.2 准备环境 1.3. 所有节点安装Docker/kubeadm/kubelet1.3.1 安装Docker1.3.2 添加阿里云YUM软件源1.3.3 安装kubeadm&#xff0c;kubelet和kubectl 1.4 部署Kubernetes Master1.5. 加入Kubernetes Node1…

springboot+vue开发的视频弹幕网站动漫网站

springbootvue开发的视频弹幕网站动漫网站 演示视频 https://www.bilibili.com/video/BV1MC4y137Qk/?share_sourcecopy_web&vd_source11344bb73ef9b33550b8202d07ae139b 功能&#xff1a; 前台&#xff1a; 首页&#xff08;猜你喜欢视频推荐&#xff09;、轮播图、分类…