欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用CSS3 Animation实现输入文字动画

程序员文章站 2022-03-16 16:41:41
...

单行输入实现
关键点: 宽度单位ch, 使用等宽字体

<h1>hello, my name is MaGua.</h1>
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h1 { 
    font: bold 200% Consolas, Monaco, monospace;
    border-right: .1em solid;
    width: 24ch; /* 与字符数等值 */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 12s steps(24, end), /* step数等于字数 */
               blink-caret .5s step-end infinite alternate;
}

多行输入实现

<h1 id='header-1'>hello, my name is MaGua.</h1>
<h1 id='header-2'>You're the best mistake I've ever made.</h1>
@keyframes typing { from { width: 0; } }
@keyframes typing2 { to { width: 40ch; } }
@keyframes blink-caret { 50% { border-color: black; } }

#header-1 { 
    font: bold 300% Consolas, Monaco, monospace;
    border-right: .1em solid transparent;
    //width: 100px; /* fallback */
    width: 24ch; /* 与字符数等值 */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 12s steps(24, end), /* step数等于字数 */
               blink-caret .5s step-end 24 alternate;
}
#header-2 { 
    font: bold 300% Consolas, Monaco, monospace;
    border-right: .1em solid transparent;
    width: 0;
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing2 20s 12s steps(40, end) forwards, /* step数等于字数 */
               blink-caret .5s 12s step-end infinite alternate;
}

中文实现

<p>敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏</p>
@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
p { 
    font: 400 200%;
    border-right: .1em solid;
    width: 53.2ch; /* 1.6625倍字数 */
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 16s steps(32, end), /* step数等于字数 */
               blink-caret .5s step-end infinite alternate;
}