css做打字机的效果

CSS实现打字机效果

/* 定义打字机动画 */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* 定义光标动画 */
@keyframes blink {
    50% {
        border-color: transparent;
    }
}

/* 定义样式 */
.typewriter {
    border-right: .15em solid orange; /* 设置光标 */
    white-space: Nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏超长部分 */
    font-size: 24px;
    animation: typing 2s steps(30,end),blink .5s step-end infinite;
}

这是在HTML页面中使用上述CSS样式的一个例子：

<div class="typewriter">
    <p> CSS实现打字机效果 </p>
</div>

CSS实现打字机效果

使用这个CSS效果可以给网页带来一些装饰性，并且可以增强读者的阅读体验。希望这个简单的示例对您有所帮助。