动态打字机效果AI 设计 PPT，只需让AI助力您的创意，轻松制作专业演示文稿，<title>动态打字机效果</tit

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态打字机效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .container {
            text-align: center;
            max-width: 800px;
            padding: 40px 20px;
        }

        .main-title {
            font-size: 3rem;
            font-weight: 600;
            margin-bottom: 30px;
            color: white;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

        .typewriter-container {
            font-size: 2.2rem;
            font-weight: 500;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.4;
        }

        .typewriter-text {
            color: #ffd700;
            text-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        .cursor {
            display: inline-block;
            background-color: #ffd700;
            width: 3px;
            height: 2.2rem;
            margin-left: 2px;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        .subtitle {
            font-size: 1.2rem;
            margin-top: 40px;
            opacity: 0.8;
            color: #e0e6ff;
        }

        @media (max-width: 768px) {
            .main-title {
                font-size: 2rem;
            }

            .typewriter-container {
                font-size: 1.5rem;
            }

            .cursor {
                height: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="main-title">AI 设计 PPT，只需</h1>
        <div class="typewriter-container">
            <span id="typewriter-text" class="typewriter-text"></span>
            <span class="cursor"></span>
        </div>
        <p class="subtitle">让AI助力您的创意，轻松制作专业演示文稿</p>
    </div>

    <script>
        class TypewriterEffect {
            constructor(element, texts, speeds = { type: 100, delete: 50, pause: 2000 }) {
                this.element = element;
                this.texts = texts;
                this.speeds = speeds;
                this.currentTextIndex = 0;
                this.currentCharIndex = 0;
                this.isDeleting = false;
                this.isPaused = false;
            }

            type() {
                const currentText = this.texts[this.currentTextIndex];

                if (this.isPaused) {
                    setTimeout(() => {
                        this.isPaused = false;
                        this.type();
                    }, this.speeds.pause);
                    return;
                }

                if (!this.isDeleting) {
                    // 输入文字
                    this.element.textContent = currentText.substring(0, this.currentCharIndex + 1);
                    this.currentCharIndex++;

                    if (this.currentCharIndex === currentText.length) {
                        // 完成输入，准备删除
                        this.isPaused = true;
                        this.isDeleting = true;
                        this.currentCharIndex--;
                    }

                    setTimeout(() => this.type(), this.speeds.type);
                } else {
                    // 删除文字
                    this.element.textContent = currentText.substring(0, this.currentCharIndex);
                    this.currentCharIndex--;

                    if (this.currentCharIndex < 0) {
                        // 完成删除，切换到下一个文本
                        this.isDeleting = false;
                        this.currentCharIndex = 0;
                        this.currentTextIndex = (this.currentTextIndex + 1) % this.texts.length;
                    }

                    setTimeout(() => this.type(), this.speeds.delete);
                }
            }

            start() {
                this.type();
            }
        }

        // 初始化打字机效果
        document.addEventListener('DOMContentLoaded', function() {
            const typewriterElement = document.getElementById('typewriter-text');
            const texts = ['一个标题', '一篇文章'];

            const typewriter = new TypewriterEffect(typewriterElement, texts, {
                type: 150,    // 输入速度（毫秒）
                delete: 75,   // 删除速度（毫秒）
                pause: 1500   // 暂停时间（毫秒）
            });

            // 启动动画，稍微延迟一下让页面完全加载
            setTimeout(() => {
                typewriter.start();
            }, 500);
        });
    </script>
</body>
</html>