Помоготе найти пример?

Question

[maralov]

Добрый вечер, коллеги. Не могу найти решение. есть блок со статистикой нужно при наведении чтобы эти кольца появлялись и крутились, каждое со своей скоростью. как то видел похожее решение на просторах интеренета, но тут уже битый час ищу и никак...помогите может кто где видел или знает как...

Comments

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

Это делается за 5мин самостоятельно

[maralov]

4 айтема - у каждого три цветных окружности и двигаются с произвольной скоростью. я заплачу вам если сделаете за 5 мин, только если больше забираю бесплатно...

[maralov]

Спаисбо за ответ, я не указал что тут свг и у каждой цифры свои круги...

ЗЫ у тебя наверное был трудный рабочий день, лучше отдохнуть от компа

[maralov]

Пашенька, благодарю за заботливость. как нарисовать круги, заскейлить и добавить им кейфреймов я знаю. вопрос не стоит в этом, на этом проекте (а их три сейчас) время ограничено, я предпочитаю внедрить уже написаное и подкрутить...

Answer 1

[Фин Дел]

как-то так? я правда первоначальную анимацию не видел

Comments

[maralov]

Спасибо тебе добрый человек! лови лучи позитива тебе в карму )

[Фин Дел]

maralov, рад помочь

[maralov]

Фин Дел, neccton.softengi.com только заметили что эта штука не хочет работать в Сафари
предположительно проблему нашел тут ему не нравиться что в начальной точке типа нет ничего:

@keyframes rotate {
  0% { 
    opacity:1;
  }
  100% {    
    opacity:1;
    transform: rotate(360deg) translate(-50%, -50%);
  }
}

Подскажи пжлст как дописать начальное значение чтобы оно крутилось....

сайт тут

[Фин Дел]

maralov, в авто префиксе прогоняли ?

@-webkit-keyframes rotate {
  0% { 
    opacity:1;
  }
  100% {    
    opacity:1;
    -webkit-transform: rotate(360deg) translate(-50%, -50%);
            transform: rotate(360deg) translate(-50%, -50%);
  }
}
@keyframes rotate {
  0% { 
    opacity:1;
  }
  100% {    
    opacity:1;
    -webkit-transform: rotate(360deg) translate(-50%, -50%);
            transform: rotate(360deg) translate(-50%, -50%);
  }
}

[maralov]

Фин Дел, конечно. Сборщик проставляет. . Да и в новых версий сафари уже не нужны префиксы...поддержка 100%

Я поле исправил но костылем небольшим (((

Проблема была в том что у элементов изначально абсолютное позиционирование задрано и для центровки используется трансформ. Убрал и подогнал в ручну по центру - заработало ... но решение такое себе на скорую руку так сказать. В инспекторе, если интересно можно посмотреть