如何解决文字动画拉伸页面导致侧边LOGO被挤出可视区域的问题

开发者阿泽

2026-10-4

问题修复方案

核心原因

你当前使用的`width`、`margin-left`动画属于布局类动画，会真实修改元素的实际占据尺寸，触发浏览器重排。哪怕给子元素加了`overflow:hidden`，元素本身的尺寸扩张依然会向上撑开父级容器，最终挤压侧边LOGO的空间。

具体修改方案

1. 新增外层容器样式约束

给.first-box添加固定的尺寸限制，从根源避免被内部动画撑开：

.first-box {
  display: flex;
  align-items: center;
  max-width: 800px; /* 可根据首页预留的文字区域宽度自定义调整 */
  overflow-x: hidden;
  flex-shrink: 0; /* 禁止该容器挤压侧边LOGO，也不会被其他元素挤压 */
}

2. 优化动画实现，避免布局重排

把原来修改margin-left、width的动画改成用transform实现，transform属于合成层动画，不会修改元素实际布局尺寸，完全不会影响外层容器：

/* 调整intro2样式，删除原width动画 */
.intro2 {
  overflow: hidden;
  width: fit-content;
}

/* 调整sub-head样式，用transform替代负margin实现位移 */
.sub-head {
  display: inline-block;
  transform: translateX(-100%);
  animation: slidein 7s infinite;
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

/* 简化动画逻辑，删除原reveal动画，合并透明度和位移控制 */
@keyframes slidein {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    transform: translateX(-100%);
    opacity: 1;
  }
  35% {
    transform: translateX(0);
    opacity: 1;
  }
  80% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}