打字机效果显示

文章目录

打字机效果显示

一、效果图


二、视频效果

  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;
	}
}
相关推荐
Asort13 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
无双_Joney32 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥33 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare35 分钟前
选择文件夹路径
前端
艾小码35 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月36 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁39 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅40 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸41 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端