使用jquery使“光标”闪烁并使用fadeOut实现打字机效果

<style>
    @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }
    .blink {
        animation: blink 1s infinite;
    }
</style>

<script>
    $(document).ready(function() {
        setInterval(function() {
            $('.cursor').toggleClass('blink');
        }, 1000);
    });
</script>

<div class="cursor">|</div>

<script>
    $(document).ready(function() {
        var text = "Hello, World!";
        var index = 0;

        function typeWriter() {
            if (index < text.length) {
                $('.typewriter').append(text.charAt(index));
                index++;
                $('.typewriter').fadeIn(100).fadeOut(100, typeWriter);
            }
        }

        typeWriter();
    });
</script>

<div class="typewriter"></div>