如何实现圆形div放大至移出视口？已尝试perspective未成功

嘿，我懂你想要的那种「圆形从镜头里放大冲出」的效果！你之前想到用perspective的思路完全没问题，只是这个属性不能直接加在目标元素本身——得给它的父容器（比如body或者专门的包裹层）设置，这样子元素的变换才会产生真实的透视感～

下面给你两个可行的实现方案，按需选择：

方案1：带透视感的镜头放大移出效果 #

这个方案会模拟真实镜头的近大远小，让圆形放大时有种「从画面里向外冲」的视觉感受：

完整代码 #

<html>
<body>
  <div class="test"></div>
</body>
</html>

body {
  /* 给父容器设置透视，数值越小透视感越强，可根据需求调整 */
  perspective: 800px;
  /* 确保body占满整个视口 */
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden; /* 隐藏超出视口的部分，避免出现滚动条 */
}

.test{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border:2px solid coral;
  width:100px;
  height:100px;
  border-radius:50%;
  /* 绑定动画：名称、时长、速度曲线、结束后保持最终状态 */
  animation: zoomOutPerspective 3s ease-in forwards;
}

/* 定义透视放大的动画关键帧 */
@keyframes zoomOutPerspective {
  to {
    /* 放大到足够大（数值可调整），保持居中的同时添加透视缩放 */
    transform: translate(-50%, -50%) scale(15);
    /* 可选：添加透明度渐变，让消失更自然 */
    opacity: 0;
  }
}

关键说明 #

• perspective必须设置在目标元素的父容器上，这样子元素的scale变换才会基于这个透视空间计算
• overflow: hidden是核心，它会把放大后超出视口的圆形部分隐藏，模拟「移出镜头」的效果
• forwards属性让动画结束后停在最后一帧，不会回弹到初始状态

方案2：无透视的纯放大移出（极简版） #

如果不需要透视感，只是想要圆形单纯放大直至消失，代码会更简洁：

修改后的CSS代码 #

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.test{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border:2px solid coral;
  width:100px;
  height:100px;
  border-radius:50%;
  animation: simpleZoomOut 3s ease-in forwards;
}

@keyframes simpleZoomOut {
  to {
    /* 放大到足够大即可，数值根据视口大小调整 */
    transform: translate(-50%, -50%) scale(20);
    opacity: 0;
  }
}

进阶玩法：指定方向移出 #

如果想让圆形向某个特定方向（比如右上角）移出镜头，可以调整动画里的translate值，比如：

@keyframes zoomOutToTopRight {
  to {
    transform: translate(200%, -200%) scale(10);
    opacity: 0;
  }
}

这样圆形会一边放大一边向右上角移动，更有「冲出画面」的真实感～

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