在大模型网站,经常能看见类似下图的打字机效果,这是我做的一个示例:
如何做出来呢?这个示例里,打字机的效果用js函数实现,文字最后的闪烁光标是span并修改样式来实现。代码如下:
/**
* 实现打字机效果的函数(不含最后的光标,光标需要自己用css实现)
* @param container 接收当前显示内容的对象
* @param content 要展示的完整一段话内容
* @param typeIntervalTime 间隔多久打出一个字(毫秒,下同)
* @param restTime 当内容打印完成后,等待多久后重新打印(为负数则不再重新打印)
*/
export function typewriterEffect(container: Ref<string>, content: string, typeIntervalTime: number = 160, restTime: number = 3200) {
let index = 0
let temp = setInterval(() => {
container.value += content.at(index)
index++
if (index === content.length) {
clearInterval(temp)
if (restTime >= 0) {
setTimeout(() => {
container.value = ''
typewriterEffect(container, content)
}, restTime)
}
}
}, typeIntervalTime)
}
// 大模型字符输入内容
const text1 = '我是Kimi,是月之暗面开发的大模型哟!'
const titleText = ref<string>('')
typewriterEffect(titleText, text1)
<div id="title">
<span id="text-span" v-html="titleText"></span>
<span id="cursor-span"></span>
</div>
#title {
position: absolute;
top: 220px;
left: 50%;
transform: translateX(-50%);
width: 800px;
font-family: Microsoft YaHei;
font-size: 24px;
font-weight: 550;
line-height: 150%;
text-align: center;
letter-spacing: 0em;
color: #3D3D3D;
#text-span {
display: inline-block;
}
#cursor-span {
display: inline-block;
margin-bottom: -3px;
margin-left: 2px;
width: 24px;
height: 2px;
background: rgb(79, 159, 255);
animation: cursorBlink 1s linear infinite;
@keyframes cursorBlink {
10% { opacity: 0.9; }
20% { opacity: 0.8; }
30% { opacity: 0.7; }
40% { opacity: 0.6; }
50% { opacity: 0.5; }
60% { opacity: 0.4; }
70% { opacity: 0.3; }
80% { opacity: 0.2; }
90% { opacity: 0.1; }
100% { opacity: 0; }
}
}