Анимированные иллюстрации с clip-path

Как анимировать иллюстрацию в CSS с помощью свойства clip-path.

ДЕМО

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

В этом кратком руководстве мы сосредоточимся на функции многоугольника, которая принимает наборы координат, которые определяют определенные точки.

Например:


.clipped-element {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

Анимированные иллюстрации с clip-path

как работает функция многоугольника

Первая координата относится к оси x, вторая - к оси y. Точка (0% 0%) находится в верхнем левом углу элемента. Область внутри точек - это область отсечения.

Свойство clip-path поддерживает переходы CSS! Вы можете использовать селектор (например, навести указатель мыши) и изменить положение координат отсечения. Этот трюк позволяет трансформировать область клипа и создавать классные анимации!

Вот пример (наведите курсор на прямоугольник в демонстрации):

Вот и всё!


🔖 Выбор по тегам ×

Top