Есть ли у вас похожие проекты?

Всем привет! Как разумнее такое реализовать? По идеи полоски и синие точки должны крутиться в разные стороны, с keyframes верстать? Или уже есть библиотеки для реализации такого?
5aca15b67f486370340684.png
  • Вопрос задан
  • 1070 просмотров
Пригласить эксперта
Ответы на вопрос 3
sfi0zy
@sfi0zy Куратор тега CSS
UI developer. Верстаю неверстаемое.
Как разумнее такое реализовать? По идеи полоски и синие точки должны крутиться в разные стороны, с keyframes верстать?

1. Рисуете все эти дуги, точки и иконки в SVG.
2. Дуги и точки анимируете с помощью transform:rotate и keyframes (поворот от 0 до 1turn, в этом нет ничего сильно замороченного, но оставлю пример для изучения), каждой ставите свое время полного оборота по вкусу.
3. Иконки винды, ведра и айоси подвергаете извороту "туда-обратно" (как в этом примере). Обертку крутите в одну сторону, а иконку в другую - будет выглядеть, как будто они летают по кругу.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Я бы сделал подобное на Crafty.js: там наследование легко делается и поворот, и всё это возможно делать с DOM-объектами без использования Canvas'а (чтобы стили задавать в CSS по-старинке).
Ответ написан
miraage
@miraage
dev
Так попробуйте сами сделать это и на pure css, и на svg. Интересный опыт, по моему мнению.
Гуглим css animations, svg animations. Дальше всё сами. И технологии подтяните, и навыки поиска информации.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы