等宽字体延伸到的 ch 长度单位和动画 animation-timing-function

新知识点get！

等宽字体（monospaced font）是指字符宽度相同的电脑字体。与此相对，字符宽度不尽相同的电脑字体称为比例字体（proportional font）。

 

东亚字体基本都是等宽字体，但是英文字符，举个例子，milk 明显 M 和 i 所占据的空间不一样。

等宽字体例子

font-family: Consolas, Monaco, monospace;

 

一个应用的特效实例  CSS content换行技术实现字符animation loading效果

 

里面谈到了一个CSS3属性， step-start，是animation-timing-function的值，W3Cschool中没有记录

深入理解CSS3 Animation 帧动画

 

step 函数能够将动画变成一帧一帧的，相较于transition的0s切换，能够控制多个帧状态。

 

此外， ch 这个长度单位，数字“0”的宽度，和等宽字体应用 text-indent属性，便能够实现 一个点 两个点 三个点的切换了

 

代码如下：

    span {
        font-family: Consolas,monaco,monospace;
        animation: 3s dot step-start infinite;
        text-indent:-2ch;
        overflow:hidden;
        width:3ch;
        display:inline-block;
        vertical-align:bottom;
    }

@keyframes dot {
    33% {
        color:red;
        text-indent:-1ch;
    }

    66% {
        color:green;
        text-indent:0;
    }
}

 

 订单提交中<span>...</span>