Вращай, реагируй! - Танцующие иконки React

внешний интерфейс дизайн CSS
Вращай, реагируй! - Танцующие иконки React

предисловие

Несколько дней назад посылка былаcodepenувидеть одинМеч ЦиЭффект загрузки, большой сюрприз, снова былCSSубежденный. Я хотел сделать это со всеми вамиМеч ЦиЗагрузившись, после поиска Сяобао обнаружил, что Сяолу добился этого, поэтому больше не играл топором.

Является ли Сяобао человеком, которого можно убедить? конечно!

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

🐱‍🏍🐱‍🏍reactзначок, слишком экстремально, это не ци мечаplus?reactПереместите пакет*!🐱‍🏍🐱‍🏍*

react.png

адрес проекта:реагировать двигаться

рисунок значка реакции

reactЗначок должен быть всем знаком, он состоит из трех эллипсов одинакового размера и окружности в центре. Использование эллипсов и круговborder-radiusвыполнить.

  • Сначала подготовьте три эллипса и центральный круг.htmlструктура
<div class="react">
    <div class="electron"></div>
    <div class="electron-alpha"></div>
    <div class="electron-omega"></div>
</div>
  • Три эллипса одинаковы, напишите общий стиль эллипса, чтобы получить три перекрывающихся эллипса.
.react > [class^="electron"] {
    border: #5ed3f3 solid 2px;
    border-radius: 100%;
    width: 100%;
    /* CSS变量 --electron-orbit-size值为72px */
    height: var(--electron-orbit-size); 
}

reactelis.png

  • Установите наклон второго и третьего эллипса равным60degа также-60deg 
.electron-alpha {
    transform: rotate(60deg);
}
.electron-omega {
    transform: rotate(-60deg);
}
  • использоватьreact: beforeПсевдоэлемент рисует центральный круг, а при абсолютном позиционировании центральный круг позиционируется в центре.reactРисунок иконы завершен.
.react:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--nucleus-size);
    height: var(--nucleus-size);
    margin-top: calc(var(--nucleus-size) / -2);
    margin-left: calc(var(--nucleus-size) / -2);
    background: var(--electron-color-hex);
}
.react > [class^="electron"] {
    position: absolute;
    top: 50%;
    margin-top: calc(var(--electron-orbit-size) / -2);
}

reactwrite.png

реагируйте на дизайн анимации значков

Число дней — пятьдесят, а даоянь — сорок девять.Есть еще проблеск жизни, и отсутствие его может создать особую красоту.

Итак, давайте попробуем убрать часть эллипса, чтобы посмотреть, получится ли крутой динамический эффект?

Предположим, что начальное состояниеborder-leftЛира, следуйВнизу слева вверху справаПорядок отсутствует один за другим, давайте посмотрим на эффект анимации.

  • оживлятьelectron-orbitПереключить отсутствующие ребра по порядку
@keyframes electron-orbit {
  0% {
    border-top: rgba(94, 211, 243, 1) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 2px;
    border-left: rgba(94, 211, 243, 0) solid 2px;
  }
  25% {
    border-top: rgba(94, 211, 243, 1) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 0) solid 2px;
    border-left: rgba(94, 211, 243, 1) solid 2px;
  }
  50% {
    border-top: rgba(94, 211, 243, 1) solid 1px;
    border-right: rgba(94, 211, 243, 0) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 4px;
    border-left: rgba(94, 211, 243, 1) solid 2px;
  }
  75% {
    border-top: rgba(94, 211, 243, 0) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 2px;
    border-left: rgba(94, 211, 243, 1) solid 2px;
  }
  100% {
    border-top: rgba(94, 211, 243, 1) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 2px;
    border-left: rgba(94, 211, 243, 0) solid 2px;
  }
}

reactdrop1.gif

Эффект анимации в целом все еще в порядке, но поскольку отсутствует часть из0 -> 1, прозрачность меняется слишком сильно, в результате чего анимация в целом становится прерывистой.

  • Уменьшите прозрачность отображаемых краев соответственно0.5 0.35 0.2 0

reactdrop2.gif

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

  • Измените толщину линии, градиент толщины4px 2px 1px 0px

reactdrop3.gif

Три эллипса используют одинаковую анимацию и запускаются в одно и то же время, поэтому ритм анимации остается одинаковым и выглядит немного жестковатым.Мы устанавливаем уникальный ритм анимации для каждого эллипса.

  • Установите разное время задержки анимации для каждого эллипса соответственно1.2s 1s 0.8s

reactdrop4.gif

Добавить анимацию мяча

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

@keyframes electron {
  0% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
  12.5% {
    top: 100%;
    transform: scale(1.5);
  }
  25% {
    left: 100%;
    transform: scale(1);
  }
  37.5% {
    top: 0%;
    transform: scale(0.25);
  }
  50% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
  62.5% {
    top: 100%;
    transform: scale(1.5);
  }
  75% {
    left: 100%;
    transform: scale(1);
  }
  87.5% {
    top: 0%;
    transform: scale(0.25);
  }
  100% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
}

reactdrop5.gif

Как, похоже, что-то есть, не волнуйтесь, есть последний шаг, пусть значок двигается.

значок двигаться

Добавьте анимацию вращения и увеличения и уменьшения масштаба значка в целом, чтобы завершить окончательный вариант.react loadingэффект

@keyframes react {
  0% {
    transform: rotate(0deg) scale(1);
  }
  12.5% {
    transform: rotate(-45deg) scale(0.9);
  }
  25% {
    transform: rotate(-90deg) scale(1);
  }
  37.5% {
    transform: rotate(-135deg) scale(0.9);
  }
  50% {
    transform: rotate(-180deg) scale(1);
  }
  62.5% {
    transform: rotate(-225deg) scale(0.9);
  }
  75% {
    transform: rotate(-270deg) scale(1);
  }
  87.5% {
    transform: rotate(-315deg) scale(0.9);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

reactdrop6.gif

Репозиторий исходного кода

Адрес источника:реагировать двигаться

адрес проекта:реагировать двигаться

Не забудьте поставить пакету ⭐, если вы считаете его полезным.

Замечательные статьи в прошлом

послесловие

Друзья, если вы чувствуете, что эта статья вам полезна, ставьте лайк Абао👍 или подписывайтесь➕ — это самая большая поддержка для меня.

Кроме того, если есть какие-либо проблемы с этой статьей или если вы не понимаете часть статьи, вы можете ответить мне в области комментариев, давайте обсудим, изучим и добьемся успеха вместе!

Категории