Как добавить такую анимацию?

Question

[Fqwd123]

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

Comments

[Ankhena]

Просто мега анимация

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

https://html5book.ru/css3-animation/

[Fqwd123]

Ankhena, ну это и так понятно, но а как всё остальное? Как нарисовать сам курсор?

[Ankhena]

Fqwd123,

Как нарисовать сам курсор?

в любом векторном редакторе

"палочки" можете рисовать градиентами в css, если скучно живется

[Fqwd123]

Ankhena, нашел конвертор gif в css, но он выдал какой то нереальный по размеру файл https://codepen.io/qweqweqwe123123/pen/mdmqWJJ . Я задам последний вопрос, а все же вставить gif анимацию это нормальная практика или всё же правильно будет ручками через css?

[Ankhena]

Fqwd123, сейчас, для подобного рода иконок, используют SVG