打字机效果显示

文章目录

打字机效果显示

一、效果图


二、视频效果

  1. B站-打字机效果图

  2. 打字机效果

    打字机效果

三、代码

框架:

javascript 复制代码
 <div class="t_title">
			<span>我的能力</span>
<!--			<span>使用相关能力,场景任务一键搞定</span>-->
			<span>{{ currentTitle }}</span>
			<span class="flicker">_</span>
        </div>

方法:

javascript 复制代码
//打印机效果
// const titleArr = ref(['使用相关能力,场景任务一键搞定','使用相关能力,场景任务一键搞定','使用相关能力,场景任务一键搞定','使用相关能力,场景任务一键搞定'])
const titleString = ref('使用相关能力,场景任务一键搞定')
const titleString_action = ref(0) // 显示到第几个字
const time = ref(null)
const currentTitle = computed(() => {
	return titleString.value.slice(0, titleString_action.value + 1)
})
const updateTitle = () => {
	titleString_action.value++
	if (titleString_action.value >= titleString.value.length) {
		clearInterval(time.value)
		setTimeout(() => {
			titleString_action.value = 0
			time.value = setInterval(updateTitle, 50)
		}, 1500)
	}
}
time.value = setInterval(updateTitle, 50)
onUnmounted(()=>{
	// console.log('销毁')
	if(time.value){
		clearInterval(time.value)
	}
})

样式:

javascript 复制代码
.t_title {
    height: calc(25 / 1920 * 100vw);
    margin: .55vw 0 .3vw 0;
    display: flex;
    align-items: flex-end;
    font-weight: 400;

    & :first-child {
        font-size: calc(25 / 1920 * 100vw);
        line-height: calc(25 / 1920 * 100vw);
        color: #333333;
    }

	& :nth-child(2) {
		//flex: 1;
		margin-left: .7vw;
		font-size: calc(14 / 1920 * 100vw);
		color: rgba(51, 51, 51, 0.498039215686275);
		display: flex;
		align-items: center;
		margin-left: .7vw;
		font-size: calc(22 / 1920 * 100vw);
		color: rgba(18, 138, 230, 0.498);
		font-weight: bold;
		cursor: pointer;
	}

    & :last-child {
        font-size: calc(22 / 1920 * 100vw);
        color: rgba(18, 138, 230, 0.498);
        font-weight: bold;
        cursor: pointer;
    }
}
//输入下划线
.flicker {
	font-size: 14px;
	opacity: 0;
	animation: blink 1.5s infinite;
}
@keyframes blink {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
相关推荐
用户203119660096几秒前
空合并运算符
前端·后端
我头上有犄角ovo2 分钟前
🤯 什么?!还在跪求后端大佬帮你上线项目?NodeSSH 让你前端也能玩转部署:从求人到自主的逆袭之路!
前端
app1e23422 分钟前
ctfshow web入门 命令执行(29-77)
android·前端
wordbaby25 分钟前
AbortController 详解:如何优雅地取消异步操作
前端
程序员爱钓鱼25 分钟前
从零开始开发一个简易的五子棋游戏:使用 HTML、CSS 和 JavaScript 实现双人对战
前端·javascript·游戏开发
林太白27 分钟前
NestJS企业级登录注册如何做
前端·javascript·后端
cong_30 分钟前
🔥 我的开源项目火了!竟被各个公众号转发
前端·后端·github
五号厂房36 分钟前
React 中如何使用自定义Hook封装可复用逻辑
前端
icefiresong2436 分钟前
使用 Node.js 和 Git 自动化部署项目
前端
码云之上38 分钟前
聊聊MCP Client及其实践
前端·架构·mcp