DOCTYPE html>
<html>
<head>
<title>打字动画示例title>
<style>
.typewriter {
color: #000;
overflow: hidden; /* 隐藏溢出的文本 */
white-space: nowrap; /* 不换行 */
border-right: .15em solid #000; /* 添加光标样式 */
animation: blink-caret .75s step-end infinite;
}
/* 光标闪烁 */
@keyframes blink-caret {
from, to {
border-color: transparent
}
50% {
border-color: #000
}
}
style>
<script>
// 页面加载完成后执行
window.onload = function () {
// 获取文本节点
var textNode = document.getElementById('text');
// 获取文本内容
var text = textNode.innerHTML;
// 清空文本内容
textNode.innerHTML = '';
// 逐个显示字符的定时器
setTimeout(() => {
var timer = setInterval(function () {
// 检查是否已显示完全部字符
if (text.length <= 0) {
clearInterval(timer);
textNode.classList.remove('typewriter');
return;
}
// 取出第一个字符并在页面上显示
var char = text.substring(0, 1);
textNode.innerHTML += char;
// 移除已显示的字符
text = text.substring(1);
}, 50);
}, 2000);
};
script>
head>
<body>
<div>
<span id="text" class="typewriter">横向领域和垂直领域是两个在不同层面上对领域或行业的分类方式。span>
div>
body>
html>
什么是横向领域和垂直领域?
{{ result2 }}
END.