本文的主题是 Glitch Art, 故障艺术.
什么是故障艺术? 我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式. 它有一种魔幻的感觉, 看起来具有闪烁, 震动的效果, 很吸引人眼球.
故障艺术它模拟了画面信号出现故障导致成像错误的感觉. 青色色块与红色色块无法重合就是这种故障的体现. 从胶片时代开始到今天的数码时代, 这种故障一直是观众非常熟悉的现象. 即使抖音的 LOGO 只是静态的, 大脑也会自己补完整个效果, 甚至还会自己脑补信号干扰的噪音.
当然, 广义的故障艺术不仅仅指这种效果, 我觉得是很宽泛的, 本文将介绍一些 CSS 能够模拟完成的故障艺术效果.
使用混合模式实现抖音 LOGO
首先从静态的开始, 抖音的 LOGO 就是很好的一个例子.
它看着像是 3 个 J 形重叠在一起. 而实际上, 是两个 J 形重叠在一起, 重叠部分表现为白色, 这个特性, 使用 CSS 的混合模式 mix-blend-mode 非常好实现, 而单个 J 形示意图如下:
图片来源于知乎: 为什么抖音的标志, 看起来具有 "电"" 闪烁 ""震动" 的感觉?
单个 J 形其实是由 3/4 圆 + 竖线 + 1/4 圆组成, 使用一个标签即可完成(加上两个伪元素).
关键点
主要借助伪元素实现了整体 J 结构, 借助了 mix-blend-mode 实现融合效果
利用
mix-blend-mode: lighten
混合模式实现两个 J 形结构重叠部分为白色
- ?
- // 实现第一个 J
- .j {
- position: absolute;
- &::before {
- content: "";
- ...
- }
- &::after {
- content: "";
- ...
- }
- }
- // 实现第二个 J, 加上混合模式
- .j:last-child {
- position: absolute;
- mix-blend-mode: lighten;
- &::before {
- content: "";
- ...
- }
- &::after {
- content: "";
- ...
- }
- }
- ?
- .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;
- }
- }
- ?
- TXET
- ?
- 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%);
- }
- ?
- Text Crack
- ?
- 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%);
- }
- }
- ?
- ?
- $img: "https://mzz-files.oss-cn-shenzhen.aliyuncs.com///uploads/U1002433/0cb5e044a1f0f7fc15f61264ee97ac1f.png";
- div {
- position: relative;
- width: 658px;
- height: 370px;
- background: url($img) no-repeat;
- animation: main-img-hide 16s infinite step-end;
- }
- div::before,
- div::after {
- position: absolute;
- width: 658px;
- height: 370px;
- top: 0;
- left: 0;
- background: inherit;
- }
- div::after {
- content: "";
- animation: glitch-one 16s infinite step-end;
- }
- div::before {
- content: "";
- animation: glitch-two 16s infinite 1s step-end;
- }
- @keyframes glitch-one {
- @for $i from 20 to 30 {
- #{$i / 2}% {
- left: #{randomNum(200, -100)}px;
- clip-path: inset(#{randomNum(150, 30)}px 0 #{randomNum(150, 30)}px);
- }
- }
- 15.5% {
- clip-path: inset(10px 0 320px);
- left: -20px;
- }
- 16% {
- clip-path: inset(10px 0 320px);
- left: -10px;
- opacity: 0;
- }
- ....
- }
- @keyframes glitch-two {
- @for $i from 40 to 50 {
- #{$i / 2}% {
- left: #{randomNum(200, -100)}px;
- clip-path: inset(#{randomNum(180)}px 0 #{randomNum(180)}px);
- }
- }
- 25.5% {
- clip-path: inset(10px 0 320px);
- left: -20px;
- }
- 26% {
- clip-path: inset(10px 0 320px);
- left: -10px;
- opacity: 0;
- }
- ...
- }
- @keyframes main-img-hide {
- 5% {
- filter: invert(1);
- }
- ...
- }
来源: http://www.bubuko.com/infodetail-3415173.html