CSS打字效果

Posted 2022-02-28 wgchen~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS打字效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>wgchen</title>
    <link rel="shortcut icon" href="#" />
    <meta name="keywords" content="https://wgchen.blog.csdn.net">
    <meta name="keywords" content="技术文章">
    <meta name="keywords" content="博客">
    <meta name="keywords" content="willem">
    <meta name="keywords" content="ycc">
    <style>
        .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
            
        
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="typing-demo">
            https://wgchen.blog.csdn.net专注于前端及php开发的技术博客
        </div>
    </div>

</body>

</html>

以上是关于CSS打字效果的主要内容，如果未能解决你的问题，请参考以下文章