使用 HTML 和 CSS 的跳舞键效果

跳舞键效果是一种可以使用 CSS 实现的文本动画效果。在此效果中，每个字母都具有键盘键的形式，然后应用动画使其沿 X 轴或 Y 轴移动。此效果也称为跳键效果或钢琴键效果。它通常用于儿童教育网站，使学习变得有趣和互动。

方法：方法是首先使用一些基本样式设计关键，然后使用关键帧沿任意一个轴为其设置动画。 nth-child属性也可用于分别延迟每个键的动画。如果不希望键之间有任何延迟，则此步骤是可选的。

HTML 代码：在此 HTML 部分中，所有字母都包裹在 标签内，而 标签又包裹在

标签内。

HTML

 

    

 

    

        G
        E
        E
        K
        S
        F
        O
        R
        G
        E
        E
        K
        S
    

 

CSS 代码：代码的 CSS 部分可以定义如下：

• 第 1 步：提供基本的背景颜色。在这种情况下，使用绿色。
• 第 2 步：使用不同的背景颜色创建键并应用框阴影以轻松区分每个键。
• 第 3 步：定义动画的关键帧。第一帧的 translateY 属性值为“0px”。第二帧它移动了一个小的值，比如“-20px”。在最后一帧它被带回到 0，创建一个循环动画。
• 第 4 步（可选）：使用第 n 个子属性指定每个键的动画延迟。

提示：一 可以为 translateY 属性选择任何值，但必须确保第一帧和最后一帧的值保持为 0。动画的第一帧和最后一帧之间的帧数也没有限制。

CSS 代码：

HTML

完整代码：在本节中，我们将结合以上两节使用 HTML 和 CSS 来制作跳舞键效果。

HTML

  
  


  

    G
    E
    E
    K
    S
    F
    O
    R
    G
    E
    E
    K
    S
  

输出：