打字机效果显示

文章目录

打字机效果显示

一、效果图


二、视频效果

  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;
	}
}
相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪2 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端