斜角裁切
裁切角在尖角与斜角之间往复,科技感边框。
效果预览
参数调节
完整代码
/* 斜角裁切 */
@keyframes clipCorners {
0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
50% { clip-path: polygon(12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%, 0 12%); }
}
.clip-corners { animation: clipCorners 2.8s ease-in-out infinite; }