效果图
首选来一个简单的布局
这里就不用多说，都是简单排版
<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, "$&");
制作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, "$&"); document.querySelectorAll("span").forEach((span, index) => { span.style.setProperty("--delay", `${index * 150}ms`); }); </script> </body></html>