CSS实现打字机效果的方法

发现一个有趣的东西，就是使用纯CSS代码实现打字机的效果。所谓的打字机效果就是控制一个字符串字符，并且字符串中的每个一个字符一个接着一个的出现。

纯CSS实现文字的打印机效果，要用到 animation 动画元素，下面先上示例代码。

CSS实现文字打印机效果的方法

1、先上效果图

2、示例代码

<style>
    .main {
        height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .content {
        width: 450px;
        white-space: nowrap;
        overflow: hidden;
        border-right: 3px solid;
        font-family: monospace;
        font-size: 2em;
        animation: go 4s steps(22), off .5s step-end infinite alternate;
    }
    @keyframes go {
        from {
            width: 0;
        }
    }
    @keyframes off {
        50% {
            border-color: transparent;
        }
    }
</style>
<div class="main">
    <div class="content">飞鸟慕鱼博客 http://feiniaomy.com</div>
</div>