Как сделать такой блок (RoadMap)?

Question

[Мар'ян Витак]

Здравствуйте. Подскажите пожалуйста как сделать такой блок? Если точнее, то именно первую часть задачи (линия с анимацией),не знаю как сделать изогнутые линии с помощью CSS (возможно ли такое вообще).

По линии необходимо сделать пробегание желтого круга, символизирующего монету и она должна падать в мешок. Ширина монеты не шире линии роадмапа.

При наведении на какой то этап фон становится синий и появляется как свечение при этом вылетает блок с текстом описания.

Comments

[Максим]

ты это где то готовое видел ?

[Мар'ян Витак]

Максим Ленский, нет.

[strelok011]

Svg mask может помочь, можно и на чистом css с keyframes для анимации монеты. Если требуется адаптив - всё сильно усложнится написанием дополнительных инструкций под иные разрешения.

[Мар'ян Витак]

strelok011, а как на чистом CSS сделать изогнутые линии?

[strelok011]

Псевдоэлемент, бордер-радиус 50%, цвет бордера у двух сторон прозрачный, позиция абсолют. Ну и повернуть можно, если один на две строки