这是一款图片悬停分离特效：四张方图排成网格，鼠标移入时图片沿一条斜线裂成上下两半，向相反方向错开，中间的缝隙里浮出一行文字，移开后严丝合缝地合上。每张图的切割角度可以单独设定，四张各不相同，观感很有节奏。整个效果零 JavaScript，纯 CSS 实现，代码量也不大。
这款图片分离特效的四个亮点
切割角度逐张可调：在图片元素上写一个角度值即可，互不影响。
分离方向永远向外：无论角度多陡，两半都沿斜线的垂直方向分开，不会互相穿插。
没有多余标签：两半由伪元素生成，HTML 里一张图就是一个容器。
自动适配深浅色：跟随系统主题切换底色与文字色。
斜切分离是怎么算出来的
其一，切割线用三角函数推导。你只提供一个角度，样式表用正切值算出这条斜线与左右边缘的交点高度，再交给裁剪路径分别取上下两块。因此改角度时不用手动重算任何坐标——这是纯手写多边形做不到的。
其二，位移方向用符号函数保证向外。角度很陡时，简单地"一个往上一个往下"会导致两半错位甚至重叠。源码用一个符号判断动态翻转方向，确保永远沿斜线的法线向外分离：
--direction: sign(cos(var(--angle)));
这一处细节，正是它比同类效果耐看的原因。
其三，两半是伪元素而非真实标签。同一张背景图被两个伪元素各取一半，因此 HTML 保持极简，也不存在两份图片重复加载的问题。中间的文字位于底层，被分开时才显露出来。
怎么换成自己的图片
只有 HTML 与 CSS 两个文件加一个图片目录。每张图就是一个 div，图片路径与切割角度都写在它自己的行内变量上，改路径、改角度、复制新增都很直观，中间的文字就是里面的标题元素。
分离距离、过渡时长与缓动曲线集中在样式表顶部，源码里对每个变量的作用都写了详细注释，包括那几个三角函数的推导思路，想深入理解或二次改造都有据可依。建议使用方形图片，观感最佳。
兼容提示：用到了 CSS 三角函数与符号函数，Chrome / Edge 111+、Safari 15.4+ 可正常显示，覆盖面较广。运行方法参见压缩包内的帮助文档。
关于这款斜切分离效果的常见问题
图片必须是正方形吗？
不是必须，但推荐。容器默认按 1:1 比例排布、图片等比填充，非方图会被裁掉一部分。改成其他比例只需调整容器的宽高比设定。
能改成竖着切开吗？
能。切割角度是一个可自由设定的值，接近 90 度时就成了纵向分割，分离方向会自动跟着变为左右错开。
中间的文字能放更多内容吗？
可以。缝隙宽度由分离距离控制，调大即可容纳更多文字；不过内容过长会影响图片的完整性，建议保持简短。
移动端有悬停效果吗？
触屏设备没有悬停态，图片会以完整状态呈现，布局在窄屏下自动变为单列。属于渐进增强，不影响内容展示。
适用场景
适合创意图集、作品展示、产品分类入口、活动页栏目导航等需要一点巧思的模块，代码轻量，接入现有页面成本很低。下载源码即可查看完整实现。
