请用html制作一个打字机效果
以下是HTML代码，使用CSS和JavaScript制作打字机效果：
<!DOCTYPE html>
<html>
<head>
<title>打字机效果</title>
<style>
#typewriter {
font-size: 24px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid #333;
padding-right: 5px;
animation: typing 2s steps(30) infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
</style>
</head>
<body>
<h1>打字机效果演示</h1>
<p>以下是一个使用HTML、CSS和JavaScript制作的打字机效果：</p>
<div id="typewriter">Hello, world!</div>
<script>
var typewriter = document.getElementById("typewriter");
var text = typewriter.innerHTML;
typewriter.innerHTML = "";
var index = 0;
var speed = 100; // 每个字母的打印速度（毫秒）
function typewrite() {
if (index < text.length) {
typewriter.innerHTML += text.charAt(index);
index++;
setTimeout(typewrite, speed);
}
}
typewrite();
</script>
</body>
</html>
这段代码会在页面上创建一个打字机效果，显示“Hello, world!”这个字符串，每个字母逐个打印出来。CSS样式使用了一个动画效果，让打字机光标闪烁。JavaScript代码使用了setTimeout函数，以逐个打印字符的方式创建打字机效果
原文地址: https://www.cveoy.top/t/topic/hjPq 著作权归作者所有。请勿转载和采集!