css 打字动画

实现思路
控制文字宽度

html

<span class="loading-text">loading</span>

文字出现效果

首先，第一步咱们先作成一个动画。

.loading-text {
    width: 100px;
    animation: loading-text-typing 3s;
}
@keyframes loading-text-typing {
    from {
       width: 0;
    }
 }

在上述样式之后，并无什么效果。由于尚未处理文字,经过禁止换行 white-space 和超出部分隐藏 overflow,你至少能够获得一段平滑的文字显示动画。

.loading-text {
    ...
    white-space: nowrap;
    overflow: hidden;
}

打字效果

平滑的动画，不可以显示出打字效果，而且也没有一个一个字的出现效果,这时候能够考虑一个宽度单位 ch。ch是数字'0'的宽度。只要咱们保持全部字母宽度等宽,就能够用ch来表明全部文字宽度。

通常字母都是不等宽的。以下
iiiiiii
MMMMMMM

为了等宽，咱们能够设置一下font-family属性找到等宽文字。如下三个均可以

Consolas, Monaco, monospace

这时候可使用steps函数,具体可自行查阅。实现文字一个一个的出现

.loading-text {
    ...
    font-family: Consolas, Monaco, monospace;
    width: 10ch;
    animation: loading-text-typing 3s steps(10),
}

光标效果

光标就至关于另外一个动画，一闪一闪，是颜色的切换动画

.loading-text {
    animation: loading-text-caret 1s steps(1) infinite,
}
@keyframes loading-text-caret {
    50% {
       border-color: transparent;
    }
}

最终代码

css

.loading-text {
    font-family: Consolas, Monaco, monospace;
    display: inline-block;
    color: #ED6A5A;
    font-weight: bold;
    width: 11ch;
    animation: loading-text-typing 3s steps(11) infinite,
               loading-text-caret 1s steps(1) infinite;
    white-space: nowrap;
    overflow: hidden;
    border-right: 1px solid;
}

@keyframes loading-text-typing {
    from {
       width: 0;
    }
 }

@keyframes loading-text-caret {
    50% {
       border-color: transparent;
    }
}

注意 width: 11ch; ch是等宽间距，有多少字定义多少就好。我多定义了一个宽度，由于我是连续动画的缘由，动画不连续就不用多1。