用纯CSS实现文本打字机效果

CSS样式代码可以在html页面上作出很多炫酷的效果，下面就是是用CSS样式代码实现的一个打字机打出文字的效果，大家可以参考一下。

纯CSS实现文字的打印机效果，要用到 animation 动画元素，根据文字的字数来算一下动画的步数，并设置每步动画的时间，可参考一下下面的示例代码。

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

1、先上效果图

2、示例代码

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