HTML新手求助：实现姓名单个字母分离式浮动弹跳效果

要实现姓名单个字母分离弹跳的效果，别用已经废弃的<marquee>标签了，用CSS动画才是现代且灵活的方案。先给你修正后的完整代码，再拆解说明：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Om mig :)</title>
  <style>
    /* 父容器：横向排列字母，居中显示 */
    .bouncing-name {
      display: flex;
      justify-content: center;
      gap: 8px; /* 字母之间的间距 */
      font-size: 48px;
      font-weight: bold;
    }

    /* 弹跳动画：上下移动 */
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px); /* 弹跳高度，可调整 */
      }
    }

    /* 每个字母的动画设置 */
    .bouncing-name span {
      animation: bounce 1.2s ease-in-out infinite alternate;
    }

    /* 给每个字母设置不同的动画延迟，实现错落弹跳 */
    .bouncing-name span:nth-child(1) { animation-delay: 0s; }
    .bouncing-name span:nth-child(2) { animation-delay: 0.1s; }
    .bouncing-name span:nth-child(3) { animation-delay: 0.2s; }
    .bouncing-name span:nth-child(4) { animation-delay: 0.3s; }
    .bouncing-name span:nth-child(5) { animation-delay: 0.4s; }

    /* 其他内容的样式优化 */
    .hvemerjeg {
      max-width: 600px;
      margin: 20px auto;
      padding: 0 15px;
    }
  </style>
</head>
<body>
  <!-- 分离字母的姓名容器 -->
  <div class="bouncing-name">
    <span>J</span>
    <span>O</span>
    <span>S</span>
    <span>E</span>
    <span>F</span>
  </div>

  <div class="hvemerjeg">
    <p>Jeg er 18 år gammel</p>
    <p>Og elsker:</p>
    <ul>
      <li>at spille fodbold</li>
      <li>at lave mad</li>
      <li>at spise mad</li>
      <li>min familie</li>
      <li>mine venner</li>
    </ul>
  </div>
</body>
</html>

关键说明 #

• HTML结构优化：把每个字母单独放在<span>标签里，这样能给每个字母独立设置动画；同时修正了你原始代码里的标签错误（比如<center>已废弃、<p>嵌套<div>、未闭合的<span>），避免页面渲染异常。
• CSS动画核心：
  • @keyframes bounce定义了弹跳的关键帧：从初始位置→向上移动→回到初始位置
  • 给每个字母添加animation属性，设置动画时长、缓动效果、循环次数
  • 通过nth-child给每个字母设置不同的animation-delay，让它们错开时间弹跳，实现分离式效果
• 自定义调整：
  • 修改transform: translateY(-20px)里的数值可以调整弹跳高度
  • 改变1.2s可以调整动画快慢
  • 调整animation-delay的差值可以改变字母弹跳的错落程度

内容的提问来源于stack exchange，提问作者goasef