HTML+CSS打字机效果教程：轻松实现，让你的网页动起来！

云游道人 2024-08-30 767 阅读 0评论

HTML部分

<div id="typing-text"></div>

    <script>
        function typeWriter(element, text, speed = 50) {
            let i = 0;

            function type() {
                if (i < text.length) {
                    element.innerHTML += text.charAt(i);
                    i++;
                    setTimeout(type, speed);
                }
            }
            type();
        }

        const textElement = document.getElementById('typing-text');
        typeWriter(textElement, "欢迎来到我的网站！这是一个自动打字效果的演示。");
    </script>

CSS部分

<style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        #typing-text {
            font-size: 24px;
            border-right: 2px solid #000;
            padding-right: 5px;
            animation: blink-caret 0.75s step-end infinite;
        }

        @keyframes blink-caret {

            from,
            to {
                border-color: transparent
            }

            50% {
                border-color: #000
            }
        }
    </style>