Как делать такой эффект на css?

Question

[Demigodd]

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


К примеру как сделать такой эффект на этой ?

Comments

[Владислав Лысков]

нет

[Demigodd]

Владислав Лысков, И как тогда сделать ?
Отфотошопить и в gif`е ставить ?

[Владислав Лысков]

DEATH2298, ага)

Answer 1

[shmatuan]

Через WebGL только (можно https://threejs.org/ )

https://threejs.org/examples/webgl_fire.html
https://www.youtube.com/watch?v=jKRHmQmduDI
ghostinthecode.net/2016/08/17/fire.html
и т.д.

Answer 2

[Максим Тимофеев]

Языки пламени появляются не где попало. То есть их позиция заведомо разная для разной картинки. Так что точно не получится для любой. Вы же не планируете распознать на картинке координаты бедер, плеч и т.д. И вообще есть ли там все это. Тут задача для не слабой нейро сети, а не для css.
Поэтому думайте в сторону горящей рамки, а не элементов картинки. А раз горящая рамка, то это может быть отдельный элемент, который наложен поверх любой картинки, это без проблем решается абсолютным позиционированием. Теперь вопрос в том где нарисовать горящую рамку. Тут или ПО для анимации или что-то готовое в гугле найти или куда логичнее заглянуть в кодепен: https://codepen.io/search/pens?q=fire&page=1&order...

Вот кстати пример на чистом css: https://codepen.io/atnyman/pen/cgGuL