详解CSS故障艺术

// 实现第一个 J
.j {
    position: absolute;
 
    &::before {
        content: "";
        ...
    }
 
    &::after {
        content: "";
        ...
    }
}
 
// 实现第二个 J，加上混合模式
.j:last-child {
    position: absolute;
    mix-blend-mode: lighten;
 
    &::before {
        content: "";
        ...
    }
    &::after {
        content: "";
        ...
    }
}

示意图如下(为了更好理解，加上了动画)：

图片的 Glitch Art 风

当然，上面实现的是我们实现的 J 形的叠加，理解了这种技巧之后，我们可以把它运用到图片之上。

这里我们会运用到background-blend-mode和mix-blend-mode。

假设，我们有这样一张图：

<div class="mix"></div>

给两张同样的图片，叠加上 青色#0ff和 红色#f00，并且错开一定的距离，两张图都要加上background-blend-mode: lighten，其中一张再加上mix-blend-mode: darken：

.mix {
    width: 400px;
    height: 400px;
    background: url($img), #0ff;
    background-blend-mode: lighten;
 
  &:after {
    content: '';
    position: absolute;
    margin-left: 10px;
    width: 400px;
    height: 400px;
    background: url($img), #f00;
    background-blend-mode: lighten;
    mix-blend-mode: darken;
  }
}

得到如下效果：

动态类抖音风格 Glitch 效果

OK，有了上面的铺垫，我们接下来可以给这种效果加上动画。

关键点：

1.利用 mix-blend-mode: lighten 混合模式实现两段文字结构重叠部分为白色

2.利用元素位移完成错位移动动画，形成视觉上的冲击效果

看看效果：

Glitch Art 风格的 404 效果

稍微替换一下文本文案为 404，再添加上一些滤镜效果（hue-rotate()、blur()）嘿嘿，找到了一个可能实际可用的场景：

效果一：

clip-path 登场

好，上述效果可以归类为一个分类。接下来开启下一个分类，下半篇幅的主角主要是clip-path。

clip-path一个非常有意思的 CSS 属性。

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部 SVG 的路径。

也就是说，使用clip-path可以将一个容器切成我们想要的样子。

例如这样：

<div>TXET</div>

div  {
    margin: auto;
    padding: 10px;
    line-height: 1.2;
    font-size: 60px;
    background: #ddd;
}

正常是这样的：

div  {
    margin: auto;
    padding: 10px;
    line-height: 1.2;
    font-size: 60px;
    background: #ddd;
+   clip-path: polygon(35% 0, 85% 0, 75% 100%, 25% 100%);
}

<div data-text="Text Crack">
    <span>Text Crack</span>
</div>

div {
    position: relative;
    animation: shake 2.5s linear forwards;
}
 
div span {
    clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}
 
div::before,
div::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
}
 
div::before {
    animation: crack1 2.5s linear forwards;
    clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}
 
div::after {
    animation: crack2 2.5s linear forwards;
    clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}
 
// 元素晃动，断裂前摇
@keyframes shake {   
    ...
}
 
@keyframes crack1 {
    0%,
    95% {
        transform: translate(-50%, -50%);
    }
 
    100% {
        transform: translate(-55%, -45%);
    }
}
 
@keyframes crack2 {
    0%,
    95% {
        transform: translate(-50%, -50%);
    }
 
    100% {
        transform: translate(-45%, -55%);
    }
}