前端CSS实现跳动的文字

news2025/3/15 20:42:39

效果图

请添加图片描述

首选来一个简单的布局

这里就不用多说，都是简单排版

<h1>一个爬坑的Coder</h1>

html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
h1 {
  font-size: 48px;
}

每个文字独立出来

每个文字都有动画，那每个字都应该是单独，可以把每个文字单独用一个标签包裹起来，这样就可以了。但是手动操作太过于麻烦了，还得上JavaScript

const h1 = document.querySelector("h1");
// $&包括替换字符串中整个匹配项的副本
h1.innerHTML = h1.innerText.replace(/\S/g, "<span>$&</span>");

请添加图片描述

制作css动画

h1 span {
  /* 内联元素（inline）动画不起作用， 因此要设置为‘inline-block’ */
  display: inline-block;
  animation: jump 500ms ease-in-out;
}

@keyframes jump {
  0%,
    100% {
      transform: translateY(0);
    }
  50% {
    transform: translateY(-10px);
  }
}

此时发现所有文字都是一起动画的，为了达到效果，我们需要给每个文字加上动画延迟（后面的要比前面的动画开始时间要迟一点），这样就可以一个接着一个动。

给每个文字都加上动画延迟

h1 span {
  /* 内联元素（inline）动画不起作用， 因此要设置为‘inline-block’ */
  display: inline-block;
  animation: jump 500ms ease-in-out;
  animation-delay: var(--delay);
}

document.querySelectorAll("span").forEach((span, index) => {
  // 我们可以借助css变量，或者直接通过js给animation-delay属性设置值
  span.style.setProperty("--delay", `${index * 150}ms`);
});

请添加图片描述

所有代码

通过以上的步骤分析，就可以达到效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        height: 100%;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
      h1 {
        font-size: 48px;
      }

      h1 span {
        /* //   内联元素（inline）动画不起作用， 因此要设置为‘inline-block’ */
        display: inline-block;
        animation: jump 500ms ease-in-out;
        animation-delay: var(--delay);
      }

      @keyframes jump {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }
    </style>
  </head>

  <body>
    <h1>一个爬坑的Coder</h1>
    <script>
      const h1 = document.querySelector("h1");
      // 包括替换字符串中整个匹配项的副本
      h1.innerHTML = h1.innerText.replace(/\S/g, "<span>$&</span>");

      document.querySelectorAll("span").forEach((span, index) => {
        span.style.setProperty("--delay", `${index * 150}ms`);
      });
    </script>
  </body>
</html>