前言

大家好，我叫小黄，我最近找到了一个家，是一个盒子。

这个盒子长这样：

我就钻了进去，结果发现我太长了，根本放不进我，漂浮在外面太没有安全感了。

于是我再盒子上装修了一个 overflow：hidden。

这样，我全在里面了，也很不舒服，我想把头透露出来，脚放进盒子里，有办法嘛？

Jun-05-2024 22-01-18.gif

如何实现插入

用两个盒子，如何实现里面的盒子移动到外面盒子下面的时候隐藏，移动到上面的时候显示呢？

单纯的使用 overflow: hidden 会导致里面的盒子整个被隐藏。

这里其实有一个伪3d 的效果，它是一个插入的 3d 操作。

解决方案

我们可以添加一个中间层的方式来实现。

我们先设立两个盒子，一个是 in 盒子，一个是 out 盒子。

<div class="out">
    <div class="in"></div>
</div>

 .out {
     margin: auto;
     margin-top: 100px;
     width: 200px;
     height: 100px;
     background-color: pink;
     border-radius: 20px;
     display: flex;
     align-items: end;
     justify-content: center;
}
.in{
	 width: 50px;
     height: 150px;
     background-color: yellow;
     border-radius: 10px;
	 margin-top: 120px;
}

这样内部的盒子移动要么全在外面，要么使用 overflow 全在里面。

我们可以再使用一个中间盒子 in-wrapper。

<div class="out">
      <div class="in-wrapper">
        <div class="in"></div>
      </div>
</div>

这个中间盒子和外部盒子底部对齐，并设置这个盒子的 overflow 为 hidden。

  .in-wrapper {
        width: 50px;
        height: 200px;
        overflow: hidden;
        position: relative;
  }

我们的 in 盒子在 in-wrapper 容器里面随意移动，就会产生 in 盒子在 out 盒子中移动的一种伪 3d 的效果。

完结

小黄成功有了一个完美的家。（其实有点像打地鼠的游戏，是不是，小黄可能是个地鼠，很快要挨打了~

大家好，我叫小黄，想要个完美的家

前言

如何实现插入

解决方案

完结