用css3实现打字机效果

如何实现打字机特效 css3

<style>
div{
    font-size: 20px;
    width: 0;
    height: 30px;
    white-space: nowrap;
    border-right: 1px solid;
    /* 不设定颜色 和字体同颜色 */
    /* background-color: pink; */
    animation: w 4s steps(10) forwards,
    blink 0.3s steps(1) infinite;
    overflow : hidden;
}
@keyframes w{
    0%{
        width: 0;
    }
    100%{
        width: 200px;
    }
}

@keyframes blink
{
    50%{
        border-color: transparent;
    }
}
</style>
<body>
    <div>
        世纪佳缘我在这里等你
    </div>
</body>

利用格子大小容纳字体超出的overflow
white-space: nowrap将字放在一行上
在关键帧 border-color: transparent 将边框透明化右边框就像打字符号一样了

用css3实现打字机效果

如何实现打字机特效 css3

悦读