模拟编辑器,或者输入框中文字啪啦啪啦输入的效果
HTML很简单,如下:
<p class="typing">没有空白的人生,永远都不会有心灵的宁静和精神的愉悦。</p>
CSS代码:
<style>
.typing {
width: 26em;
white-space: nowrap;
border-right: 2px solid transparent;
animation: typing 3.5s steps(26, end), blink-caret .75s step-end infinite;
overflow: hidden;
}
/* 打印效果 */
@keyframes typing {
from { width: 0; }
to { width: 26em; }
}
/* 光标闪啊闪 */
@keyframes blink-caret {
from, to { box-shadow: 1px 0 0 0 transparent; }
50% { box-shadow: 1px 0 0 0; }
}
</style>
本文来自博客园,作者:书中枫叶,转载请注明原文链接:https://www.cnblogs.com/zy-mg/p/17293562.html