CSS打字效果

DOCTYPE html>



    
    wgchen
    
    
    
    
    
    
    
        .wrapper {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .typing-demo {
            width: 57ch;
            animation: typing 12s steps(57), blink .5s step-end infinite alternate;
            white-space: nowrap;
            overflow: hidden;
            border-right: 3px solid;
            font-family: monospace;
            font-size: 2em;
        }

        @keyframes typing {
            from {
                width: 0
            }
        }

        @keyframes blink {
            50% {
                border-color: transparent
            }
        }
    




    
        
            https://wgchen.blog.csdn.net专注于前端及PHP开发的技术博客