移动的钢琴键

下面是我制作有动画效果的钢琴键，主要复习之前案例学习到的内容。
设置完后的效果：图1

当鼠标移动到黑色块时，白色琴键向下移动，并有动画效果；鼠标移开则恢复-图1：图2

当鼠标移在白色琴键时会被触发：图3

经典代码：源代码 图4

图5:

复习设置小手的属性-cursor：pointer；
定义盒子位置移动距离-transform:translatey（x水平方向；y垂直方向）
过渡属性-transition：all（默认值）0.1s（过渡效果完成时间）ease（匀速过渡）。
图6：

设置盒子的阴影-box-shadow：inset（内阴影）x-offset（水平方向偏移量，数值为负数时阴影在左边，为正时在右边）y- offset（垂直方向偏移量，数值为负数时阴影在上边，为正时在下边）blur-radius（模糊程度，数值越大越模糊）color（阴影颜色）
图7

transition-delay动画延迟时间，数值越大延迟时间越长；