CSS 고장 예술 에 대한 상세 한 설명

개술

본 논문 의 주 제 는 Glitch Art,고장 예술 이다.
무엇이 고장 예술 입 니까?우리 가 잘 아 는 틱 톡 의 로고 가 바로 고장 예술의 한 표현 이다.그것 은 반 짝 이 고 진동 하 는 효과 가 있어 눈길 을 끈 다.
고장 예술 은 화면 신호 가 고장 나 이미 지 를 잘못 만 드 는 느낌 을 모 의 했다.청색 덩어리 와 빨간색 덩어리 가 겹 치지 않 는 것 이 바로 이런 고장 의 표현 이다.필름 시대 부터 오늘날 의 디지털 시대 까지 이런 고장 은 줄곧 관중 들 에 게 매우 익숙 한 현상 이다.틱 톡 의 로고 가 정적 일 뿐 이 더 라 도 뇌 는 스스로 효 과 를 다 보완 하고,심지 어 는 자신의 뇌 보신 호가 방해 하 는 소음 까지 보완 한다.
믹스 모드 로 틱 톡 로고 구현
우선 정적 부터 틱 톡 의 로고 가 좋 은 예 다.

그것 은 마치 세 개의 J 형 이 겹 쳐 진 것 처럼 보인다.실제 적 으로 두 개의 J 형 이 겹 쳐 있 고 겹 치 는 부분 은 흰색 으로 표현 된다.이 특성 은 CSS 의 혼합 모델 인 mix-blend-mode 를 사용 하면 매우 실현 하기 쉬 우 며 하나의 J 형 설명도 는 다음 과 같다.

하나의 J 형 은 사실 3/4 원+세로 선+1/4 원 으로 구성 되 어 있 으 며,하나의 라벨 을 사용 하면 완성 할 수 있다(두 개의 위조 요 소 를 추가).
관건:
주로 위조 요 소 를 빌려 전체적인 J 구 조 를 실 현 했 고 mix-blend-mode 를 빌려 융합 효 과 를 실현 했다.mix-blend-mode:lighten 혼합 모델 을 이용 하여 두 J 형 구조의 중첩 부분 을 흰색 으로 실현 했다.
그래서 전체 효 과 는 두 개의 태그 만 필요 합 니 다.

<div class="j"></div>
<div class="j"></div>

간단 한 SASS 코드:

//       J
.j {
    position: absolute;
 
    &::before {
        content: "";
        ...
    }
 
    &::after {
        content: "";
        ...
    }
}
 
//       J，      
.j:last-child {
    position: absolute;
    mix-blend-mode: lighten;
 
    &::before {
        content: "";
        ...
    }
    &::after {
        content: "";
        ...
    }
}

설명 도 는 다음 과 같다.

그림 의 글 리치 아 트 바람
물론 위 에서 실현 한 것 은 우리 가 실현 한 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;
  }
}

다음 효 과 를 얻 을 수 있 습 니 다:

여기 서 상기 틱 톡 로고 와 처 리 는 조금 다 르 고 사용 하 는 혼합 모드 도 한 가지 가 아니 라 간단하게 설명 한다.
1.그림 자체 가 빨간색 과 파란색 이 아니 기 때문에 background-image 를 통 해 두 가지 색 을 겹 쳐 서 background-blend-mode:lighten 을 통 해 표현 해 야 합 니 다.
2.중간 중첩 부분의 원색 을 유지 하기 위해 서 는 mix-blend-mode:darken 을 역방향 으로 처리 해 야 합 니 다.(이해 하지 못 하 는 학생 은 디 버 깅 을 열 고 수 동 으로 몇 개의 혼합 모드 를 끄 고 스스로 느낌 을 느끼 면 된다)
동적 틱 톡 스타일 Glitch 효과
OK,위의 쿠션 이 있 으 면 우 리 는 다음 에 이런 효과 에 애니메이션 을 추가 할 수 있 습 니 다.
관건:
1.mix-blend-mode:lighten 혼합 모드 를 이용 하여 두 단락 의 문자 구조 중첩 부분 을 흰색 으로 실현 한다.
2.요소 의 변위 로 잘못된 이동 애니메이션 을 완성 하여 시각 적 충격 효 과 를 형성한다.
효과 보기:

물론 우 리 는 반드시 혼합 모드 를 사용 하여 융합 부분 을 흰색 으로 만들어 야 하 는 것 은 아니다.이 배색 효과 만 사용 할 수 있 고 위의 효 과 를 바탕 으로 하 는 다른 버 전 은 혼합 모드 를 사용 하지 않 았 다.
관건:
1.가짜 요 소 를 이용 하여 문자 의 두 개의 던 전 을 생 성 합 니 다.
2.시각 효 과 는 변위,커버,혼합 모드 로 완성
3.배색 은 틱 톡 로고 의 스타일 을 참고 했다.

배색 만 사용 하고 혼합 모드 를 사용 하지 않 는 장점 은 모든 문자 의 사본 에 더 큰 이동 거리 와 처리 할 수 있 는 공간 이 생 겼 다 는 것 이다.
Glitch Art 스타일 404 효과
텍스트 문안 을 404 로 조금 바 꾸 고 필터 효과(hue-rotate(),blur()를 추가 합 니 다.헤헤,실제 사용 가능 한 장면 을 찾 았 습 니 다.
효과 1:

효과 2:

기타 배색 효과
물론 이 빨간색+파란색 의 배색 효과 만 있 는 것 은 아니다.노란색+분홍색+파란색 믹스-blend-mode:multiply 와 같은 다른 배색 및 혼합 모드 의 조합 도 있다.
그리고 어떤 때 는 효과 가 배경 과 섞 이 는 것 을 원 하지 않 으 므 로 isolation:isolate 를 사용 하여 격 리 할 수 있 습 니 다.
클립 패스 등장
좋아,상술 한 효 과 는 하나의 분류 로 분류 할 수 있다.다음 분 류 를 시작 하 겠 습 니 다.후반 부 주인공 은 주로 클립 패스 입 니 다.
클립-path 는 매우 재 미 있 는 CSS 속성 입 니 다.
clip-path CSS 속성 은 요소 의 일부 영역 만 표시 할 수 있 는 잘라 내기 영역 을 만 들 수 있 습 니 다.영역 내 부분 표시,영역 밖의 숨 김.편집 영역 은 내 장 된 URL 이 정의 하 는 경로 나 외부 SVG 를 참조 하 는 경로 입 니 다.
클립 패스 를 사용 하면 용기 하 나 를 우리 가 원 하 는 모양 으로 자 를 수 있다 는 것 이다.
예 를 들 어 다음 과 같다.

<div>TXET</div>

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

정상 은 이렇다.

클립-path 를 사용 하여 평행 사각형 으로 재단 하기:

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%);
}

결 과 는 다음 과 같다.

그러면 생각 이 있 습 니 다.우 리 는 한 문 자 를 몇 개의 복사 본 을 복사 하고 겹 쳐 서 이 몇 개의 복사 본 을 각각 재단 하여 변위 애니메이션 을 하면 됩 니 다.
클립-path 를 사용 하여 텍스트 끊 기 애니메이션 구현
우 리 는 여전히 요 소 를 사용 합 니 다:before,:after 두 개의 가짜 요 소 를 복사 한 다음 에 각각 clip-path 를 사용 하여 재단 한 다음 에 transform 을 사용 하여 제어 합 니 다.
핵심 코드:

<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%);
    }
}

이러한 효 과 를 얻 을 수 있다.

클립 패스 의 글 리치 아 트.
OK,계속 하 세 요.위 에 있 는 매트 리 스 가 있 으 면 다음 에 우 리 는 이 효 과 를 그림 위 에 작용 하고 애니메이션 을 추가 합 니 다.
아무 그림 이나 선택 하 세 요.

우 와,아주 세 보 펑 크 야.
애니메이션 을 실현 하 는 관건 은:
원소 의 두 개의 위조 원 소 를 사용 하여 그림 의 두 개의 복사 본 을 생 성 합 니 다
클립-path 를 사용 하여 두 개의 복사 본 그림 요 소 를 재단 한 다음 에 변위,transform 변환,필터 추가 등 일련의 작업 을 합 니 다.
간단하게 위조 코드 붙 이기:

$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);
    }
    ...
}

애니메이션 부분의 코드 양 이 너무 많아 서 SASS 순환 함 수 를 사용 하여 무 작위 로 부분 을 생 성 했 습 니 다.수 동 으로 제어 하면 효과 가 더 좋 을 것 입 니 다.물론 애니메이션 디 버 깅 에 더 많은 시간 이 걸 릴 것 입 니 다.
효 과 를 보면 CSS 능력 에 한계 가 있 지만 실제 효과 도 그렇게 나 쁘 지 않다.

총결산
본 고 는 순수한 CSS 에서 혼합 모델 과 클립 패스 를 사용 하여 실 현 된 일부 고장 예술(Glitch Art)을 중점적으로 소개 했다.물론 상술 한 몇 가지 효 과 는 이 두 가지 속성 만으로 혼자서 할 수 있 는 것 이 아니다.
그 중에서 transform,filter 도 중요 한 역할 을 발휘 했다.물론 transform,filter 만 사용 해도 기본 적 인 고장 예술 효 과 를 실현 할 수 있 고 독자 들 이 관심 이 있 는 것 은 스스로 더 시도 할 수 있다.생산 환경 에 사용 하려 면 mix-blend-mode 와 clip-path 의 호환성 문 제 를 고려 해 야 합 니 다.
이상 은 CSS 고장 예술의 상세 한 내용 을 상세 하 게 설명 하 는 것 입 니 다.CSS 고장 예술 에 관 한 자 료 는 우리 의 다른 관련 글 을 주목 하 세 요!