持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

键盘⌨️是大家必不可少的设备，今天就来写一个键盘的效果，然后依次让按键亮起来。

跳动的键盘

键盘不止是用来敲的，还可以让它跳动。

结构

<div class="container"></div>

这里呢，英文字母有26个，所以一个元素肯定是不行的。因为我懒得一个一个写dom元素了，所以结构上借助了js，仅仅是为了生成dom元素的，如下：

const str = 'Q,W,E,R,T,T,Y,U,I,O,P,A,S,D,F,G,H,J,K,L,Z,X,C,V,B,N,M';
const arr = str.split(',');
let html = '<div>';
for (i = 0; i < arr.length; i++) {
    const letter = arr[i];
    html += `<span style="--i:${i}">${letter}</span>`
    if (letter === 'P' || letter === 'L') {
        html += `</div><div>`
    } else if (letter === 'M') {
        html += `</div>`
    }
}
document.querySelector('.container').innerHTML = html;

当然，你也可以用js做其他事情，比如随机的让按键跳动等。

样式

单个键盘按键的样式，给了基础的阴影效果和文字水平垂直居中效果，如下：

.container div span {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    color: #fff;
    border-radius: 0.2rem;
    text-align: center;
    line-height: 2rem;
    box-shadow: 0 0 1rem #fff;
    margin: 2rem 1rem;
    position: relative;
}

然后，我们需要给按键添加动画，因为有26个字母且想让按键一个接一个亮起来，所以动画完成的时候应该在1/26处，如下：

.container div span {
    animation: _animate 26s linear calc(var(--i) * 1s) infinite;
}


@keyframes _animate {
    3.8% {
        background-color: #16c9c9;
        top: -0.5rem;
    }
    3.85% {
        background-color: transparent;
        top: 0;
    }
}

这里我们是通过变量--i来定义动画延迟时间的。

效果

效果及代码详情，如下：

参考代码片段的时候，我们需要注意一下以下两点：

1. 如果按键乱位，可以单独打开，保证宽度足够宽
2. 之所以把script整体内容放在html中，是因为把script的代码放在代码片段的script中会报错，具体原因不知。

总结

这个主要注意的是，动画的效果在整个动画时长中什么位置完成。