Глюк-арт CSS

внешний интерфейс CSS
Глюк-арт CSS

Тема этой статьи — Глитч-арт, глитч-арт.

Что такое глитч-арт? Всем известный Douyin LOGO — одно из проявлений глитч-арта. Он имеет волшебное ощущение и выглядит как мерцающий, вибрирующий эффект, который бросается в глаза.

Glitch Art Имитирует ощущение сбоя в сигнале изображения, вызывающего ошибку изображения. Неспособность блока голубого цвета и блока красного цвета не перекрываться является проявлением этой ошибки. Такие сбои были очень знакомым явлением для зрителей с начала эры кино до сегодняшнего цифрового века. Даже если Douyin LOGO только статичен, мозг сам компенсирует весь эффект и даже компенсирует шум помех сигнала.

Конечно, обобщенный глитч-арт относится не только к этому эффекту, я думаю, что он очень широк, в этой статье будут представлены некоторые эффекты глитч-арта, которые может имитировать CSS.

Douyin LOGO в смешанном режиме

Прежде всего, начните со статического, хорошим примером является LOGO Douyin.

image

Это выглядит как 3 J-формы, сложенные друг на друга. На самом деле две фигуры J перекрываются вместе, а перекрывающаяся часть белая.Эта функция использует режим наложения CSS.mix-blend-modeОчень хорошо реализовано, и единая J-образная схема выглядит следующим образом:

Картинка исходит от Чжиху:Почему логотип Douyin кажется «электрическим», «мерцающим» и «вибрирующим»?

Одна J-образная форма на самом деле состоит из 3/4 окружности + вертикальной линии + 1/4 окружности, что можно сделать с помощью одной метки (плюс два псевдоэлемента).

ключевой момент

  • Общая J-структура в основном достигается с помощью псевдоэлементов, а эффект слияния достигается с помощью режима mix-blend.
  • использовать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: "";
        ...
    }
}

Принципиальная схема выглядит следующим образом (для лучшего понимания добавлена ​​анимация):

tiktok

Полная ДЕМО:

Douyin LOGO с использованием режима смешивания и наложения

Фотографии Glitch Art Wind

Конечно, приведенная выше реализация представляет собой реализованную нами суперпозицию в форме буквы J. Поняв эту технику, мы можем применить ее к изображению.

Здесь мы будем использоватьbackground-blend-modeа такжеmix-blend-mode.

Предположим, у нас есть такой график:

image

Все, что вам нужно, это этикетка

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

Получите следующий эффект:

image

Обработка вышеупомянутого логотипа Douyin немного отличается, и используется более одного смешанного режима, поэтому, пожалуйста, кратко объясните.

  1. Поскольку сама картинка не красная, а голубая, ее нужно передатьbackground-imageНаложите эти два цвета и передайтеbackground-blend-mode: lightenпусть покажет

  2. Чтобы сохранить основной цвет средней наложенной части, необходимо наложить еще одинmix-blend-mode: darkenСделайте это в обратном порядке. (Студенты, которые не понимают, могут включить отладку, вручную отключить несколько смешанных режимов и ощутить это на себе)

Полная ДЕМО:

Douyin-подобный эффект LOGO Glitch для изображений

Динамический вибрато-подобный эффект Glitch

Хорошо, с приведенным выше предзнаменованием мы можем добавить анимацию к этому эффекту.

ключевой момент

  • Используйте mix-blend-mode: осветлите режим наложения, чтобы сделать перекрывающуюся часть двух текстовых структур белой.
  • Используйте смещение элемента, чтобы завершить анимацию движения дислокации, чтобы создать визуальный эффект удара

Взгляните на эффект:

Длина этой статьи немного велика, и кода в ней нет.Полное DEMO находится здесь:

Douyin-подобный текстовый эффект сбоя LOGO

Конечно, нам не нужно использовать режим наложения, чтобы сделать часть слияния белой, мы можем просто использовать этот эффект сопоставления цветов, основанный на другой версии вышеупомянутого эффекта, без использования режима наложения.

ключевой момент

  • Использование псевдоэлементов для создания двух копий текста
  • Визуальные эффекты выполняются с помощью смещения, маскирования, режимов наложения.
  • Цветовое соответствие соответствует стилю Douyin LOGO.

textglitch2

Полная ДЕМО здесь:

Текстовый эффект сбоя CSS

Преимущество простого сопоставления цветов без режимов наложения заключается в том, что для каждой копии текста появляется больше движения и пространства для работы.

Эффект 404 в стиле Glitch Art

Слегка замените текстовую копию на 404 и добавьте несколько эффектов фильтра (hue-rotate(),blur()) хе-хе, нашел сценарий, который действительно может работать:

Эффект первый:

404

Эффект второй:

404

Демонстрации двух эффектов 404 выглядят следующим образом:

Другие цветовые эффекты

Конечно, не только это红 + 青цветовой эффект. Существуют также некоторые другие режимы сопоставления цветов и смешивания, такие как黄 + 粉红 + 蓝Сотрудничатьmix-blend-mode: multiply.

Затем, иногда эффект не хочет сливаться с фоном, вы можете использоватьisolation: isolateизолировать.

Ну, вышеперечисленные эффекты можно сгруппировать в категорию. Далее открыть следующую категорию

дебют клип-пути

Главными героями второй части являютсяclip-path.

clip-pathОчень интересное свойство CSS.

Свойство CSS clip-path создает область отсечения, в которой может отображаться только часть элемента. Часть внутри области отображается, а часть вне области скрыта. Области отсечения — это пути, определяемые встроенными URL-адресами или внешними SVG, на которые есть ссылки.

То есть с помощьюclip-pathКонтейнер можно разрезать на то, что мы хотим.

Например это:

<div>TXET</div>

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

Нормально так:

использоватьclip-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%);
}

Результат выглядит следующим образом:

image

Тогда идея есть, мы можем скопировать несколько копий текста, наложить их друг на друга, а затем вырезать эти копии отдельно для анимации смещения.

Анимация разрыва текста с использованием clip-path

Мы по-прежнему используем элементы::before,::afterДва псевдоэлемента делают две копии и используют их по отдельностиclip-pathОбрежьте, а затем используйте преобразование для управления.

Основной код:

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

Вы можете получить этот эффект:

textcrack

Полная демонстрация:

clip-path для достижения эффекта разрыва текста

Самая ранняя версия этого эффекта находится у этого автора:George W. Park

Глитч-арт от clip-path

Хорошо, продолжаем, с вышеописанным предзнаменованием, далее применяем этот эффект к картинке и добавляем анимацию.

Выберите любое изображение:

image

Вау, очень киберпанк.

Ключом к достижению анимации является:

  • Создает две копии изображения, используя два псевдоэлемента элемента
  • использоватьclip-pathОбрежьте два элемента копии изображения, а затем выполните ряд операций, таких как смещение, трансформация и добавление фильтров.

Просто вставьте псевдокод:

<div></div>

$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 имеет ограниченные возможности, фактический эффект не так уж и плох:

GIF-изображение слишком большое, кадр слишком сильно опускается, и эффект сильно снижается. Для полной демонстрации и эффектов вы можете нажать здесь:

clip-path реализует анимацию изображений в стиле глитч-арт

Суммировать

В этой статье основное внимание уделяется использованию режимов наложения иclip-pathНекоторые глитч-арты (Glitch Art) реализованы, конечно же, вышеупомянутые эффекты достигаются не только этими двумя атрибутами в одиночку.

В этом,transform,filterтакже сыграли в нем важную роль. Конечно, просто используйтеtransform,filterОн также может создавать некоторые базовые глитч-арт эффекты.Заинтересованные читатели могут попробовать больше для себя Если вы хотите использовать его в производственной среде, вам необходимо рассмотретьmix-blend-modeа такжеclip-pathпроблемы совместимости.

Мое собственное понимание Glitch Art на самом деле относительно простое, но я просто думаю, что гораздо интереснее использовать CSS для достижения подобных эффектов, поэтому я стараюсь практиковаться.

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Более захватывающие и интересные эффекты CSS, добро пожаловать сюда, чтобы увидетьВдохновение для CSS. Найдите вдохновение для написания CSS здесь..

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории