Как анимировать иллюстрацию в CSS с помощью свойства clip-path.
Свойство CSS clip-path используется для скрытия части элемента, к которому оно применяется. Он создает «область отсечения». То, что внутри этой области, видно, а то, что снаружи, скрыто.
В этом кратком руководстве мы сосредоточимся на функции многоугольника, которая принимает наборы координат, которые определяют определенные точки.
Например:
.clipped-element {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
как работает функция многоугольника
Первая координата относится к оси x, вторая - к оси y. Точка (0% 0%) находится в верхнем левом углу элемента. Область внутри точек - это область отсечения.
Свойство clip-path поддерживает переходы CSS! Вы можете использовать селектор (например, навести указатель мыши) и изменить положение координат отсечения. Этот трюк позволяет трансформировать область клипа и создавать классные анимации!
Вот пример (наведите курсор на прямоугольник в демонстрации):
Вот и всё!
Ссыллка на автора - twitter.com/guerriero_se !
