Еженедельная фронтенд-анимация №4: анимация вращения аватара Nuggets

внешний интерфейс GitHub CSS

В марте восточноазиатский муссон принес влажный воздух с Тихого океана и воспользовался выходными с небольшим дождем.Мультсериал в неделючетвертого. Без лишних слов, давайте начнем наш текст. В этой статье анализируются и реализуются некоторые эффекты, которые представлены только как идея и используются только в качестве учебных материалов.

Как большой пользователь золотого самородка, я наткнулся на эту анимацию.Анимация очень проста в реализации.Она организована следующим образом.Из любопытства, вы нашли эту анимацию?.

исходный анимационный эффект

существуетПерсональная домашняя страница Nuggets

Достичь анализа

После анализа реализация эффекта имеет три точки

  • Как реализовать круглую аватарку
  • Реализация эффекта поворота, как определить угол поворота
  • Скорость вращения значительно изменяется и должна определяться как функция времени.

Код

Настройка круглого аватара может быть достигнута путем установки закругленных углов.

.avatar {
    border-radius: 50%
}

Реализация анимации вращения может быть реализована напрямую с помощью анимации CSS, обратите внимание, что количество кругов напрямую выбирается в угле поворота.turn, IE9.0+, Firefox13.0+ и другие браузеры поддерживают это свойство (см. ниже), используйте его с уверенностью.

Что же касается изменения скорости при вращении, то мы можем прямо передатьпредыдущие статьиОн управляется многократно упомянутой функцией времени.

.avatar:hover {
    transform: rotate(666turn);
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34, 0, .84, 1)
}

Показать результаты

Интерпретация ключевых моментов

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

Код был загружен на github, и вопросы приветствуются.

Последняя практика, вставкамой блог, добро пожаловать, чтобы следовать

Категории