字母移除动画与容器尺寸平滑调整生成BW Logo的实现问题咨询

问题原因 #

无法实现B、W靠拢和容器收缩的核心原因是：opacity: 0仅控制元素透明度，被隐藏的字符仍然占据文档流空间，不会释放宽度。另外两个单词中间的空白文本节点也会固定占用间隔宽度，导致B和W无法紧挨。

修复代码 #

CSS 修改 #

* {
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 35px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
  min-height: 100vh;
  background-color: #f7a21b;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  color: #a71e29;
  transition: all 1.4s ease;
  display: inline-block;
}
.letter {
  transition: color 1.4s ease;
}
.reak,
.orld,
.space {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  transition: all 1.4s ease;
}

JS 修改 #

$(document).ready(function () {
  $(".title").click(function () {
    $(".letter").css("color", "white");

    setTimeout(function () {
      $(".reak, .orld, .space").css({
        "opacity": "0",
        "width": "0",
        "margin": "0"
      });
    }, 1400);
  });
});

HTML 修改 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">

<body>
  <div class='wrapper'>
    <div class='title'>
      <span class='letter'>B</span><span class='reak'>REAKFAST</span><span class="space"> </span><span class='letter'>W</span><span class='orld'>ORLDWIDE</span>
    </div>
  </div>
</body>

修改后隐藏的字符会在淡出的同时逐步收缩宽度释放空间，容器会自动跟随内容缩放到BW Logo的宽度，B和W也会自然紧挨。

• 代码实现优势：文件体积仅几KB，远小于视频/GIF；适配任意分辨率不会失真；支持交互触发、参数动态调整；无需额外加载视频解码器，性能开销更低。
• 视频/GIF优势：复杂特效（粒子、3D、光影效果）实现成本更低，无需考虑多浏览器兼容性，动画效果和设计稿100%一致不会出现样式差异。
• 对于这个文字动画场景，代码实现效果远优于视频/GIF，加载速度更快、适配性更强，没有视频黑边、播放卡顿、需要点击播放等问题。

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