打字机效果显示

文章目录

打字机效果显示

一、效果图


二、视频效果

  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;
	}
}
相关推荐
猫头虎-前端技术17 分钟前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫17 分钟前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓17 分钟前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java17 分钟前
CSS的文本样式
前端·css
前端小趴菜0518 分钟前
css - 滤镜
前端·css
祈祷苍天赐我java之术18 分钟前
理解 CSS 浮动技术
前端·css
索迪迈科技20 分钟前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作22 分钟前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3
DONG91323 分钟前
深度解析CSS单位与媒体查询:构建现代化响应式布局的核心技术
前端·css·html·css3·媒体
一只小风华~30 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架