如何将div制作成牙齿形状实现随鼠标滚动开合的页面效果？

div自定义形状的实现方式 #

div完全可以实现任意自定义形状，不需要依赖图片，常用两种方式：

• 用clip-path属性直接对矩形div做路径裁剪，不管是单颗牙齿还是整排牙齿的轮廓，只要写对路径坐标就能直接裁出来，不需要额外嵌套元素
• 嵌套多个小元素拼接形状，比如整排牙齿就可以用flex布局横向排列多个带圆角的小div，每个小div对应一颗牙齿，调整宽高、圆角和间距就能拼出自然的牙列效果

牙齿嘴部开合效果的方案选择 #

直接用透明png牙齿素材实现，是绝大多数场景下更简便的选择，优势很明显：

• 不需要写大量CSS路径或者调大量子元素样式，只要把素材贴在上下两个遮罩div的相邻边缘即可，开发效率高
• 不管是卡通质感、写实质感的牙齿效果都能还原，纯CSS很难快速调出自然的牙齿弧度、质感
• 适配成本低，给背景图设置background-size: 100% auto就能自动适配不同屏幕宽度，牙列不会变形

具体实现逻辑非常简单：

1. 建两个固定定位的遮罩div，一个置顶占满上半屏，一个置底占满下半屏，z-index设到最高，两个div的主体部分填充口腔同色的纯色
2. 上遮罩的底边位置贴上牙素材（齿尖朝下），下遮罩的顶边位置贴下牙素材（齿尖朝上）
3. 监听页面滚动事件，根据滚动距离计算张嘴幅度，同步给两个遮罩加translateY偏移：上遮罩往上移、下遮罩往下移，逐步露出遮罩下方的网站内容即可

如果你的项目是极简几何风格，不想引入图片资源，再考虑纯CSS实现的方案，给个上牙列的最简clip-path示例参考：

.upper-jaw {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50vh;
  background: #222; /* 口腔深色 */
}
.upper-jaw::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #fff; /* 牙齿白色 */
  /* 裁剪出连续齿形，按需要的牙齿数量调整拐点即可 */
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    95% 100%, 92.5% 65%, 90% 100%,
    85% 100%, 82.5% 65%, 80% 100%,
    75% 100%, 72.5% 65%, 70% 100%,
    0 100%
  );
  border-radius: 0 0 6px 6px;
}

小提示：如果做滚动联动，记得给偏移动画加个极短的过渡时长，开合效果会更自然，不会显得生硬。

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