如何移除容器底部溢出，或实现容器局部裁剪需求？

核心思路 #

overflow:hidden会同时裁剪所有方向的溢出内容，无法单独控制某几个方向。我们可以通过CSS遮罩（mask）或clip-path实现只裁剪元素的左、下部分，允许上、右部分溢出显示，完美匹配“头探出洞口，身体被裁剪”的效果。

方案一：使用CSS Mask（推荐，更灵活） #

利用radial-gradient创建遮罩，只让狗的头部区域（因rotateY(180deg)翻转，对应元素右上角）露出，其余部分被遮罩裁剪，同时配合动画调整遮罩范围：

.box {
  width: 500px;
  height: 500px;
  background-color: orange;
  border-radius: 50%;
  position: relative;
  /* 移除全局overflow:hidden，不再依赖它裁剪 */
}

.dog {
  width: 115%;
  height: 115%;
  position: absolute;
  animation: dogPeeking 5s linear infinite alternate;
  /* 兼容webkit内核浏览器 */
  mask: radial-gradient(circle at 100% 0%, transparent 0%, black 0%);
  -webkit-mask: radial-gradient(circle at 100% 0%, transparent 0%, black 0%);
}

@keyframes dogPeeking {
  0% {
    transform: translate(-50%, -10%) rotateY(180deg);
    /* 遮罩范围极小，完全隐藏狗 */
    mask: radial-gradient(circle at 100% 0%, transparent 10%, black 10%);
    -webkit-mask: radial-gradient(circle at 100% 0%, transparent 10%, black 10%);
  }
  60%,100% {
    transform: translate(10%, -10%) rotateY(180deg);
    /* 扩大透明遮罩范围，露出狗的头部，其余部分被裁剪 */
    mask: radial-gradient(circle at 100% 0%, transparent 45%, black 45%);
    -webkit-mask: radial-gradient(circle at 100% 0%, transparent 45%, black 45%);
  }
}

方案二：使用clip-path（精准控制裁剪区域） #

通过clip-path: inset()指定只裁剪元素的底部和左侧部分，上、右侧完全保留。注意因狗被rotateY(180deg)翻转，实际“左侧”对应元素的右侧，需调整裁剪数值：

.box {
  width: 500px;
  height: 500px;
  background-color: orange;
  border-radius: 50%;
  position: relative;
}

.dog {
  width: 115%;
  height: 115%;
  position: absolute;
  animation: dogPeeking 5s linear infinite alternate;
}

@keyframes dogPeeking {
  0% {
    transform: translate(-50%, -10%) rotateY(180deg);
    /* 完全裁剪，隐藏狗 */
    clip-path: inset(0 0 100% 100%);
  }
  60%,100% {
    transform: translate(10%, -10%) rotateY(180deg);
    /* 裁剪底部30%、左侧40%，上、右侧不裁剪 */
    clip-path: inset(0 0 30% 40%);
  }
}

关键说明 #

1. 移除了.box的overflow:hidden，避免全局裁剪限制；
2. 遮罩/clip-path精准控制显示区域，确保头部（耳朵、鼻子）露出，身体底部和左侧被裁剪；
3. 动画中同步调整遮罩/clip-path参数，配合位移实现平滑的探出头效果；
4. 注意rotateY(180deg)会翻转元素左右方向，设置裁剪区域时需对应调整数值。

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