Начните работу с полигонами CSS

В течение долгого времени фундаментальная структура прямоугольных блоков и кругов, образующая веб-сайты, одинаково беспокоила дизайнеров и творческих разработчиков. Поэтому, когда на сцену в браузерах WebKit появились полигоны CSS clip-path, я сразу же загорелся от волнения.

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



Основная цель Clip-path - замаскировать область (не только изображения, но и фактическое содержимое), но в этом уроке я собираюсь подробно остановиться на том, что можно сделать с помощью свойства polygon. Я расскажу вам, как можно использовать циклы for в Sass для создания широких переходных эффектов и оживить коллекцию полигонов CSS.

Создайте набор div

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

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

Мы стремимся к эффекту, в котором набор треугольных форм веером расходится из центральной точки (см. Codepen для этого руководства ). Сначала вам нужно создать div для любого количества многоугольников (здесь я использую семь) и разместить их друг над другом.

.polygon-wrap { div { position: absolute; width: 500px; height: 275px; top: 0; left: 0; } }

Создайте первое состояние полигонов

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

.polygon-wrap { div { -webkit-clip-path: polygon(50% 95%, 50% 95%, 50% 95%); background-color: #46008C; } }

Триггер анимации

Для перехода вам понадобится триггер движения. Здесь мы просто поместим состояние наведения на элемент-оболочку.

.polygon-wrap:hover { }

Создать многоугольники

Довольно приятно, что полигоны CSS создаются с помощью всего одной строчки кода. Многоугольники могут принимать любую форму: они не привязаны к какому-либо количеству точек или сторон. Однако, если вы перемещаете фигуру, как мы здесь, не забудьте использовать одинаковое количество точек и использовать одну и ту же точку в массиве для анимации каждой следующей точки:

..polygon-wrap:hover { div:nth-child(1) { -webkit-clip-path: polygon(19% 42%, 26% 32%, 50% 95%); } }

Этот многоугольник имеет треугольную форму, которая образует левую часть веера из семи частей. Значения в процентах выравниваются по координатам X и Y в зависимости от размера родительского блока div.

Переходы через цикл

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

.polygon-wrap { div { transition: 0.2s; @for $i from 1 through 7 { &:nth-child(#{$i}) { $tdelay: ((($i*0.1))+0.2s); $tduration: ($i*0.05 + 0.25s); transition-delay($tdelay); transition-duration($tduration); } } } }

Этот фрагмент кода по существу создает разницу во времени для каждого из div. Начальный буфер - это «база» перехода (здесь 0,2 секунды). Далее идет значение задержки (0,1 секунды). Это значение умножается на порядковый номер div (от одного до семи), чтобы получить задержку перехода.

По кусочкам

По кусочкам

По кусочкам

В личном проекте, По кусочкам , Я использовал то же свойство многоугольника для создания изображений 30 различных исчезающих животных, каждое из которых состоит из 30 треугольных «кусочков». Я использовал базовые переходы CSS для плавного перехода от животного к животному по экрану. Кажется, что животные превращаются друг в друга; эффект, созданный с использованием задержек перехода, обсуждаемых в этом руководстве.

Внутри In Pieces движение создается последовательно. Элементам div присваиваются целые числа дочерних индексов, которые затем умножаются на определенное значение, чтобы получить время задержки. Я использовал 30 элементов div, чтобы содержать 30 отдельных многоугольников. Затем я ввел задержку перехода в 0,1 секунды, чтобы 10-й многоугольник был анимирован через одну секунду (0,1 x 10), а 30-й многоугольник перешел через три секунды (0,1 x 30).

iphone 8 против iphone 11 pro

Эффект мерцания

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

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

Вывод

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

Слова : Брайан Джеймс

Брайан Джеймс - внештатный дизайнер и креативный программист, известный своими По кусочкам . Эта статья изначально была опубликована в выпуске 272 журнала net magazine .

Понравилось это? Прочтите это!