一个简单的打字机效果的实现
该文本展示了一个简单的打字机效果的实现，使用HTML、CSS和JavaScript。通过CSS样式定义了打字机效果的外观和动画，JavaScript用于动态设置文本和控制动画的重置与执行。每隔5秒，文本会重新执行打字机效果，增强了用户体验。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打字机</title>
<style>
/* 样式部分 */
.typewriter-effect {
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
font-size: 24px;
border-right: 2px solid; /* 光标边框 */
white-space: nowrap;
overflow: hidden;
}
.typewriter-effect > .text {
max-width: 0;
animation: typing 3s linear forwards; /* 使用linear取代steps */
white-space: nowrap;
overflow: hidden;
}
.typewriter-effect::after {
content: " |";
animation: blink 1s infinite;
animation-timing-function: step-end;
}
@keyframes typing {
0% {
max-width: 0;
}
100% {
max-width: 100%; /* 平滑过渡到100% */
}
}
@keyframes blink {
0%, 75%, 100% {
opacity: 1;
}
25% {
opacity: 0;
}
}
</style>
</head>
<body>
<!-- HTML部分 -->
<div class="typewriter-effect">
<div class="text" id="typewriter-text"></div>
</div>
<!-- JavaScript部分 -->
<script>
const typeWriter = document.getElementById('typewriter-text');
const text = '我是程序员茄子'; // 定义要显示的中文文本
// 设置文本并启动打字动画
function startTyping() {
typeWriter.innerHTML = text;
// 重置动画
typeWriter.style.animation = 'none';
setTimeout(() => {
typeWriter.style.animation = '';
typeWriter.style.animation = 'typing 3s linear forwards'; // 平滑显示文字
}, 50);
}
// 每隔 5 秒重新执行打字机效果
startTyping();
setInterval(startTyping, 5000); // 调整间隔时间使其与动画持续时间匹配
</script>
</body>
</html>