Как перенести анимацию SVG из GearGenerator на сайт?

219
09 марта 2018, 13:59

Подскажите пожалуйста как правильно перенести и подключить вот эту http://geargenerator.com/#200,200,100,6,1,0,0,4,1,8,2,4,27,-90,0,0,16,4,4,27,-60,1,1,12,1,12,20,-60,2,0,60,5,12,20,0,0,0,2,-563 svg анимацию на сайт. Вставлял код в html из скачанного файла gearsetSVG, картинка красивая но не вертится!)) Как правильно это анимировать? Открывая этот файл в браузере но тоже статичен.

Answer 1

Звёздочки крутятся с помощью скриптов JS. У элемента div, в котором лежит звёздочка постоянно изменяется свойство style: в нём постоянно увеличивается или уменьшается угол поворота (это место подчёркнуто малиновым цветом на снимке экрана). Вы тоже можете написать скрипт, который будет делать такую операцию периодически.

READ ALSO
Получение данных с html <input> в TypeScript

Получение данных с html <input> в TypeScript

Не могу получить значения с html

173
Можно ли оптимизировать код? [требует правки]

Можно ли оптимизировать код? [требует правки]

Приветствую, данный код можно оптимизировать?

288
HTML-CSS. Как добавить стрелку в этот код?

HTML-CSS. Как добавить стрелку в этот код?

Как добавить в span ::before, также как на скрине? У меня в футере так:

178
Обычные css значения тега &lt;progress&gt; в html5

Обычные css значения тега <progress> в html5

Собрался анимировать прогресс-барно понравилась дефолтная тема

181