Перевод статьи Добавьте анимацию светящейся рамки вокруг вашего изображения (или любого элемента) с помощью нескольких строк кода. Круто, правда? Это бесконечная анимация при наведении курсора, которая плавно останавливается, когда мышь покидает элемент! Реализация одного элемента на базе современного CSS (@property, CSS Mask, математические функции и т. д.). Codepen-1 Другая версия, где граница выберет кратчайший путь при возвращении в исходное положение. Наведите курсор много раз, чтобы заметить разницу! Codepen-2 Похожая анимация была у Лия Веру в виде "марширующих муравьёв". Но там эффект был за счёт позиционирования фона. Здесь же используется маска и переменные. Статья в оригинале Благодарю за внимание.
Перевод статьи
Добавьте анимацию светящейся рамки вокруг вашего изображения (или любого элемента) с помощью нескольких строк кода. Круто, правда? Это бесконечная анимация при наведении курсора, которая плавно останавливается, когда мышь покидает элемент!
Реализация одного элемента на базе современного CSS (@property, CSS Mask, математические функции и т. д.).
Другая версия, где граница выберет кратчайший путь при возвращении в исходное положение. Наведите курсор много раз, чтобы заметить разницу!
постскриптум
Похожая анимация была у Лия Веру в виде "марширующих муравьёв". Но там эффект был за счёт позиционирования фона. Здесь же используется маска и переменные.
Благодарю за внимание.