Как сделать обратную анимацию распада с использования css или javascript (Pixel Dust)?

Question

[jjmail]

Всем привет! Нужно реализовать ховер. При наведении на кнопку, должна собираться стрелочка из маленьких частиц. Как лучше всего это реализовать, можно ли сделать без JS ?

Состояние 1:


Состояние 2:


Состояние 3:

Answer 1

[Ivan Bogachev]

Вот как-то так (кроссбраузерность не проверял, но должно работать IE11+).

По-хорошему стоило бы нарисовать точки в виде SVG-картинки и анимировать ее части, а не div элементы, как я сделал, но общая концепция должна быть понятна. Поведение с опцией hidden можно заменить на :hover у вашей кнопки.

Comments

[Anton Filippov]

автор вопроса должен тебе 20 баксов)

Answer 2

[Anna_BS]

Можно сделать на css, через анимацию(можно добавить рандом смещение точек)