Есть проект по вёрстке, дизайн в фигме. И в одной секции находится svg анимация: вот ссылка. В определенный момент передвижения мышки - кнопка закрашивается и на форме появляется тень.
Так вот, как можно реализовать эту анимацию из фигмы в вёрстке ?
Для начала разбить на шаги и определить их более конкретно.
1) Не в "определённый момент" а по наведению на кнопку, так? За реакцию наведения отвечают стили с псевдоклассом :hover
2) Дочерний элемент не может влиять на родительский. Поэтому задать тень родителю(форме) при наведении на ребёнка нельзя. Но в современном CSS можно указать родителю, что если он имеет ребёнка с ховером, то добавить ему правила отображения. Делается это через псевдокласc :has, но тут нужно обратить внимание на браузерную поддержку.
Альтернативный вариант - если у формы будет posiiton: relative, а у кнопки будет абсолютно спозиционированный псевдоэлемент размером на всю форму и при наведении на кнопку псевдоэлемент будет отрисовывать тень.
Альберт Макс, что такое svg курсор? Гифка это же то, как это должно выглядеть, так? То есть это схематично форма, на которой кнопка, так? При наведении на кнопку кнопка закрашивается а у формы добавляется тень. Или не так?
Альберт Макс, мне кажется, что красный фон появляется не при наведении, а при нажатии. На видео задержка между этими событиями. Но его качество оставляет место для сомнений.
Ankhena, Это Вадим, Это всё svg анимация. Пользователь ничего не делает. Это бесконечная анимация и необходимо реализовать перемещение path элементов внутри svg.
Альберт Макс, Тогда в чём вопрос - не понятно.
Умеете в код - используйте что душе угодно, чтобы реализовать эту анимацию. Как делать свг анимации полно в интернете информации. Хоть keyframes.
Не умеете в код - идите в условный svgator и там мышкой всё наклацаете.
