HTML 打字机效果代码示例 - 使用 CSS 和 JavaScript 实现 - 常规

以下是使用 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函数，以逐个打印字符的方式创建打字机效果。