设置overflow:hidden的容器对display:inline-block子元素失效求助

问题分析 #

你当前用margin-top:80px让子元素下移，但因为.anim_word是inline-block元素，它的margin会影响父级行框布局，导致即使.anim_line设置了overflow:hidden，子元素依然能被看到。inline-block元素的垂直对齐特性会让它不会完全被容器的overflow裁剪。

修复方案 #

改用transform: translateY()实现位移，这是更可靠的动画方式，不会影响布局，且能被overflow:hidden正确裁剪：

修改后的完整代码 #

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  width: 100%;
  background: #121212;
}

.anim_container {
  margin: 80px;
}

.anim_inner_container {
  position: relative;
  background-color: hsla(260, 91%, 84%, 1);
  background-image: radial-gradient(at 67% 61%, hsla(250, 67%, 53%, 1) 0px, transparent 40%), radial-gradient(at 34% -33%, hsla(249, 67%, 53%, 1) 0px, transparent 40%), radial-gradient(at 44% -15%, hsla(249, 67%, 53%, 1) 0px, transparent 40%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Calibri';
  font-size: 64px;
  line-height: 96px;
}

.anim_line {
  height: 96px;
  width: 100%;
  overflow: hidden;
}

.anim_word {
  display: inline-block;
  /* 替换margin-top为transform实现位移 */
  transform: translateY(80px);
  -webkit-transform: translateY(80px);
  transition: transform 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
  -webkit-transition: transform 1.15s cubic-bezier(0.62, 0.05, 0.01, 0.99) 0s;
}

.anim_word.show {
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

JS

setTimeout(function() {
  $('.anim_word').addClass('show');
}, 1200);

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
  <div class="anim_container">
    <div class="anim_inner_container">
      <div class="anim_line">
        <div class="anim_word">A</div>
        <div class="anim_word">product</div>
        <div class="anim_word">designer</div>
        <div class="anim_word">helping</div>
      </div>
      <div class="anim_line">
        <div class="anim_word">design</div>
        <div class="anim_word">beautiful,</div>
        <div class="anim_word"> user</div>
        <div class="anim_word">centered</div>
      </div>
      <div class="anim_line">
        <div class="anim_word">products</div>
      </div>
    </div>
  </div>
</div>

关键优化说明 #

1. 新增html, body的高度重置，确保.container的height:100%能正确生效
2. 用transform: translateY()替代margin-top：transform是合成属性，不触发页面重排，动画更流畅，且位移不会影响父级布局，能被overflow:hidden完全裁剪
3. 精简冗余的transition前缀，保留webkit前缀覆盖多数浏览器场景

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