故障艺术

故障艺术（Glitch Art），就是利用事物形成的故障，进行艺术加工，使这种故障缺陷反而成为一种艺术品，具有特殊的美感。这个词对于很多人而言或许都比较陌生，但事实上，作为艺术形式，它就产生于我们生活中一些常见的、有时十分恼人的细节，譬如说当电视机、电脑等设备的软件、硬件出现问题后，可能会造成视频音频播放异常，在视觉上，画面变成破碎、有缺陷的图像，颜色也失了真。

简单说明明是出bug了，却可以庆祝和拥抱各种瑕疵的美学。

下面展示一个css3模拟的故障404效果，将由 CSS 动画和 “剪辑路径” 属性驱动。

1.建立html

<div class="glitch" data-text="GLITCH">GLITCH</div>

2. css伪元素复制两层文本

.glitch {    
    position: relative;
}
.glitch::before,.glitch::after {    
    content: attr(data-text);    
    position: absolute;    
    top: 0;    
    left: 0;    
    width: 100%;    
    height: 100%;    
    background: black;
}

3. 分别给两个副本添加左右位移和投影

.glitch::before {    
    left: 1px;    
    text-shadow:1px 0 black;
}
.glitch::after {    
    left: -1px;    
    text-shadow: -1px 0 red;
}

4. 添加剪切属性

.glitch::before,.glitch:after{    
    clip:rect(0,900px,0,0); 
}

5. 添加keyframes动画

.glitch::before{
    animation:glitchAnim 1s infinite linear;
}
.glitch::after{
    animation:glitchAnim 2s infinite linear;
}
@keyframes glitchAnim{    
    $frames:15;    
    @for $i from 0 through $frames{         #{percentage($i*(1/$frames))}{        
            clip:rect(random(100)+px,900px,random(100)+px,0)         }
    }
}

完整代码可查看

https://codepen.io/ElaineXu/pen/OQGjpq

本篇文章来源于微信公众号: TripDesign