打字机效果显示

一、效果图

二、视频效果

1. B站-打字机效果图

2. 打字机效果
   

   打字机效果

三、代码

框架：

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

方法：

//打印机效果
// 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 = 0time.value = setInterval(updateTitle, 50)}, 1500)}
}
time.value = setInterval(updateTitle, 50)
onUnmounted(()=>{// console.log('销毁')if(time.value){clearInterval(time.value)}
})

样式：

.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;}
}