效果图：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>【前端实例代码】使用 HTML CSS 实现打字机效果|前端开发 网页制作 基础入门教程 网页开发中常见的样式与特效，收藏起来肯定用的上！</title>
<style>
:root {
--bg-color: hsl(49 37% 94%);
--typewriterSpeed: 6s;
--typewriterCharacters: 24;
}
body {
margin: 0;
font-family: "Source Sans Pro", sans-serif;
min-height: 100vh;
display: grid;
place-content: center;
text-align: center;
/*background: var(--bg-colo