字体擦除效果 转自马黑教程专版

admin

君不见黄河之水天上来

admin

<style type="text/css">
.innerBox {
        width: 10rem;
        height: 20px;
        overflow: hidden;
        font-size: 1rem;
        animation: writing 5s steps(11,end) infinite;
}

@keyframes writing {
        0% { width: 0 }
        100% { width: 12rem; }
}
</style>

<div class="innerBox">君不见黄河之水天上来</div>

admin

解析：实现方法是使用一个 @keyframes 动画 writing 来模拟逐字上屏的打字效果。动画从 width: 0 到 width: 10rem 演变，即盒子的宽度从 0 变到到 12 个rem（rem和em差不多，1个rem或1个em就是一个汉字的宽度），期间，盒子CSS代码中 animation 对它的调用采用分步方式 steps(10,end) 运行，分 11 步，因为例子里有10个汉字，0 的时候没有字，所以加 1 步。


若想打完字又逐一删除，可在 animation 调用的 writing 动画代码中的 infinite 之后加入 alternate 。