clip-path裁剪动画演示
<style>.clip-box {
position: relative;
margin: 30px auto;
width: 600px;
height: 600px;
filter: drop-shadow(2px 2px 12px rgba(0,0,0,.5));
}
.clip-box::before, .clip-box::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(90deg, beige, tan, beige 2%);
transition: 2s;
}
.clip-box::before {
clip-path: polygon(0 0,0 100%,100% 100%);
}
.clip-box::after {
left: -1px;
width: calc(100% + 1px);
height: calc(100% + 1px);
clip-path: polygon(0 0,100% 0,100% 100%);
}
.clip-box:hover::before {
clip-path: polygon(0 0,50% 50%,100% 0);
}
.clip-box:hover::after {
clip-path: polygon(50% 50%,0 100%,100% 100%);
}
</style>
<div class="clip-box"></div> 一楼代码
<style>
.clip-box {
position: relative;
margin: 30px auto;
width: 600px;
height: 600px;
filter: drop-shadow(2px 2px 12px rgba(0,0,0,.5));
}
.clip-box::before, .clip-box::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(90deg, beige, tan, beige 2%);
transition: 2s;
}
.clip-box::before {
clip-path: polygon(0 0,0 100%,100% 100%);
}
.clip-box::after {
left: -1px;
width: calc(100% + 1px);
height: calc(100% + 1px);
clip-path: polygon(0 0,100% 0,100% 100%);
}
.clip-box:hover::before {
clip-path: polygon(0 0,50% 50%,100% 0);
}
.clip-box:hover::after {
clip-path: polygon(50% 50%,0 100%,100% 100%);
}
</style>
<div class="clip-box"></div>
本帖最后由 马黑黑 于 2025-7-29 13:08 编辑
思路：
主元素带两个伪元素，伪元素都切成直角三角形并拼凑在一起构成正方形，刚好能完整覆盖主元素。:hover 交互时，将两个伪元素改切成两个等腰三角形。动画时长2s。
理论上，两个伪元素和主元素应是等宽等高。实操中发现三角形斜面衔接处会有一像素的裂缝，因此::after 多设一像素的宽高，并将left属性设为 -1px，暂且以此法去除裂缝。
还可以直接对主元素动手术：
<style>
.clip-box {
position: relative;
margin: 30px auto;
width: 600px;
height: 600px;
background: repeating-linear-gradient(90deg, beige, tan, beige 2%);
filter: drop-shadow(2px 2px 12px rgba(0,0,0,.5));
}
.clip-box:hover {
clip-path: polygon(0 0,100% 0,0 100%,100% 100%);
}
</style>
这个有意思，两个伪元素实际已经是两个对角线上的三角形拼成的正方形了，鼠标触碰后，变成上下对接的三角了。很有意思的变化{:4_199:} 本帖最后由 马黑黑 于 2025-7-29 13:10 编辑
直接切主元素方法也不错，但是，元素被 clip-path 操作后，阴影不再存在，变化过程细节也没有那么丰富
after 里使用了left: -1px;，宽高也各加了1 ，这个没明白，是因为两个三角对不齐么？ background: repeating-linear-gradient(90deg, beige, tan, beige 2%);
这个底图纹路设计也和漂亮{:4_199:} 红影 发表于 2025-7-29 13:09
background: repeating-linear-gradient(90deg, beige, tan, beige 2%);
这个底图纹路设计也和漂亮{:4_1 ...
重复性线性渐变的最偷懒的设计方法{:4_170:} 红影 发表于 2025-7-29 13:08
after 里使用了left: -1px;，宽高也各加了1 ，这个没明白，是因为两个三角对不齐么？
三楼有解释 红影 发表于 2025-7-29 13:07
这个有意思，两个伪元素实际已经是两个对角线上的三角形拼成的正方形了，鼠标触碰后，变成上下对接的三角了 ...
这是幼儿园小盆友玩积木{:4_170:} 马黑黑 发表于 2025-7-29 13:11
重复性线性渐变的最偷懒的设计方法
这个好啊，最容易理解呢{:4_187:} 马黑黑 发表于 2025-7-29 13:12
三楼有解释
嗯嗯，看到了。前面回复时还没有{:4_173:} 红影 发表于 2025-7-29 13:47
嗯嗯，看到了。前面回复时还没有
后补的 红影 发表于 2025-7-29 13:47
这个好啊，最容易理解呢
它简单哈 马黑黑 发表于 2025-7-29 13:12
这是幼儿园小盆友玩积木
非常有趣味，很吸引人{:4_187:} clip-path裁剪不易理解，谢谢马老师经典讲授、演示与分享{:4_190:} 杨帆 发表于 2025-7-29 14:43
clip-path裁剪不易理解，谢谢马老师经典讲授、演示与分享
可以去简单教程那里了解一下。
clip-path，顾名思义，就是根据路径对目标对象进行裁剪，可以剪成圆形、椭圆形、矩形、多边形。以圆形为例，我们对一个四四方方的 div 进行裁剪，clip-path: circle(100px);，这样，矩形就以中心点为圆心（可以定义）、以 100px为半径画一个圆，园内保留，院外切掉。不同的切法有不同的细节规定。 红影 发表于 2025-7-29 13:48
非常有趣味，很吸引人
注意防沉迷{:4_170:} 马黑黑 发表于 2025-7-29 18:35
可以去简单教程那里了解一下。
clip-path，顾名思义，就是根据路径对目标对象进行裁剪，可以剪成圆形 ...
好的，谢谢老师{:4_190:} 马黑黑 发表于 2025-7-29 13:48
后补的
这个补得很及时{:4_187:}