Как выполнить такую же анимацию?

Question

[Денис Букреев]

Такие дела: tuborg0001.fallwinter.dk

На логотипе интересная анимация: от лого отлетают волны, а под самим логотипом фон немного вибрирует.

Как это выполнить?

Answer 1

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

Можно на чистом css, меняя content для псевдоэлемента с помощью ключевых кадров

Answer 2

[Егор Живагин]

Как волны я не увидел, а картинка там просто с keyframes двигается)

Answer 3

[vetsmen]

Анимация волн сделана на SVG. Ну и где-то конечно есть Javascript часть для анимации SVG элементов.

<g><circle cx="152.94" cy="63.72500000000002" r="186.08726988281347" fill="none" stroke="#87bf57" stroke-width="0.7841378389847803px" style="stroke-opacity: 0.801176;"></circle><circle cx="152.94" cy="63.72500000000002" r="154.92715792988938" fill="none" stroke="#87bf57" stroke-width="1.108841656164139px" style="stroke-opacity: 1;"></circle><circle cx="152.94" cy="63.72500000000002" r="121.22866800106902" fill="none" stroke="#87bf57" stroke-width="1.1898077261725952px" style="stroke-opacity: 1;"></circle><circle cx="152.94" cy="63.72500000000002" r="83.10243902488548" fill="none" stroke="#87bf57" stroke-width="1.005341255937085px" style="stroke-opacity: 1;"></circle><circle cx="152.94" cy="63.72500000000002" r="44.23842102633702" fill="none" stroke="#87bf57" stroke-width="0.6048698871878049px" style="stroke-opacity: 1;"></circle><circle cx="152.94" cy="63.72500000000002" r="8.027965461034638" fill="none" stroke="#87bf57" stroke-width="0.30270040022705097px" style="stroke-opacity: 1;"></circle></g>