Анимированные точки на картинке, как реализовать?

Question

[Антон Вебсайтовский]

Здравствуйте
На одном сайте увидел анимированные точки на картинке, анимация очень простая, как такое реализовать, не совсем пойму как там сделано, вроде через скрипт. Картинка увеличивается и уменьшается, как бы такое мигание идет.

Вот тут: __https://техосмотр051.рф/

Скрин точек:

Comments

[Strannyk]

Вот каким боком тут Java?

Answer 1

[eternalfire]

Comments

[Антон Вебсайтовский]

О спасибо, а я помню что что-то подобное делал но с кнопками)

Answer 2

[profesor08]

Две одинаковые картинки поверх друг друга. Одна из них увеличивается/уменьшается. На CSS делается при помощи @keyframes и transform: scale.

Comments

[Антон Вебсайтовский]

Загрузил свою картинку https://jsfiddle.net/jvrsnwq2/

[profesor08]

https://jsfiddle.net/profesor08/gstkojap/

[Антон Вебсайтовский]

profesor08, Большое спасибо, как все просто, а я думал на гиф надо будет делать или js подключать.

[Антон Вебсайтовский]

profesor08, вопрос, а оно адаптивное будет?

[Strannyk]

Антон Вебсайтовский, Да купи ты уже книжку, в конце концов. Разжевали все уже.

[Антон Вебсайтовский]

Strannyk, Если не заметил, то это другой вопрос назрел.

[Антон Вебсайтовский]

profesor08, Сделал пример и привязал точку на картинке, там картинка адаптивная, текст движется за точкой и точка должна двигаться и уменьшатся за картинкой, анимацию наложил по верх картинки и через top, left, поставил ее где она должна быть на ту точку что нарисована на картинке, все анимирует все круто, но как быть с адаптацией, чтобы точка двигалась.

Рабочий пример: https://jsfiddle.net/rocy7xg5/

[Антон Вебсайтовский]

Адаптивный пример вот, картинка с точкой адаптивная, https://jsfiddle.net/naqu3fdo/