Волшебное использование масштаба и трансформации для точного управления направлением анимации.

внешний интерфейс GitHub CSS
Волшебное использование масштаба и трансформации для точного управления направлением анимации.

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

Затем вчера друг в группе спросил об эффекте, подобном этому, и спросил, как

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

Описание сложно понять, посмотрите на оригинальный эффект:

tsorigin

Сложность

Когда я впервые увидел этот эффект, мое сердце не дрогнуло. Я думал, что это просто эффект подчеркивания при наведении курсора. После того, как друг напомнил мне, что в этом анимационном эффектеЗнаки подчеркивания входят с одного конца и выходят с другого. Более того, эта анимация при наведении реализована на чистом CSS.

youqu

Не принимая во внимание упомянутые выше требования к модификации, сначала подумайте об этом, если вы просто используете CSS для восстановления вышеуказанных эффектов, как это сделать?

Эффект восстановления

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

xxx

Демонстрация CodePen — откуда она взялась и куда вернулась

Теперь трудностьКак изменить направление анимации при выходе из наведения.

Ниже мы разобьем анимацию наведения на 3 части:

  1. наведение входит в состояние
  2. состояние наведения
  3. выйти из состояния наведения

Однако для эффекта наведения обычно достаточноначальное состояние,а такжесостояние наведениядва вида. Возможно, наш код выглядит так:

div {
    xxxx...
}

div:hover {
    xxxx...
}

Для анимации перехода при наведении она должна быть из:

  • Нормальное состояние -> состояние наведения -> нормальное состояние (три шага, два состояния)

Следовательно, должен быть метод, который позволяет вводить анимацию HOVER для создания двух разных эффектов:

  • состояние 1 -> состояние наведения -> состояние 2 (три шага, три состояния)

Реализация ключей, управляющих направлением анимации

Итак, ключевой момент здесь (выделено мной):

Сделайте вход и выход анимации при наведении двумя разными эффектами..

Далее, что является сутью этой статьи, используйтеtransform: scale()так же какtransform-originдобиться этого эффекта.

transform: scale()добиться линейного движения

Преобразование: масштаб должен быть знаком всем, вообще говоря, он используется для масштабирования, официально говоря, это:

Функция CSS scale() используется для изменения размера элемента. Элементы могут быть увеличены или уменьшены с помощью значений масштабирования, определенных в векторной форме, и различные значения масштабирования могут быть установлены в разных направлениях.

Здесь мы используемtransform: scaleX(0)а такжеtransform: scaleX(1)Чтобы изменить отображение и скрытие строки, ее CSS-код прост, он может выглядеть так:

div {
    position: absolute;
    width: 200px;
    height: 60px;
}

div::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 2px;
    background: deeppink;
    transition: transform .5s;
    transform: scaleX(0);
}

div:hover::before {
    transform: scaleX(1);
}

scale

Демонстрация CodePen -- преобразование: scaleX(0) и преобразование: scaleX(1)

Эм? зачем использоватьtransform: scale()анимировать линии? потому что это подходитtransform-originРеализуйте разные направления движения для анимации:

transform-originОсознайте направление движения линии

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

Самое важное место в этом эффекте здесь, мы используемtransform-originизменитьtransform: scale()Начало координат реализует направление движения линии.

  1. Мы устанавливаем значение по умолчанию для линииtransform-originзаписать как состояние 1
  2. При наведении установите другойtransform-origin, обозначаемый как состояние 2

Так что, конечно, когда мы наводим курсор, он будет читатьсостояние 2изtransform-origin, увеличьте масштаб от этого начала доscaleX(1), когда курсор уйдет, он будет читатьсостояние 1изtransform-origin,отscaleX(1)Государство сжимается до этого начала.

Итак, код CSS выглядит так:

div {
    position: absolute;
    width: 200px;
    height: 60px;
}

div::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200px;
    height: 2px;
    background: deeppink;
    transition: transform .5s;
    transform: scaleX(0);
    transform-origin: 100% 0;
}

div:hover::before {
    transform: scaleX(1);
    transform-origin: 0 0;
}

Здесь мы ловко применяем новый слой через состояние наведения.transform-origin, чтобы вход и выход анимации имели два разных эффекта, два разных направления.

Таким образом, желаемый эффект был успешно достигнут, разбрасывая цветы:

torigin

CodePen Demo -- волшебное использование transform-origin

Обратите внимание, что использованиеtransform-originизменитьtransform: scale()Начало линии реализует направление движения линии, не прибегая кpositionсмещение,transform: translate()или свойства положения, такие как поле, чтобы изменить положение строки.

Итак, что интересно, линии на самом деле не сместились, и на самом деле это уловка, чтобы заставить их выглядеть так, как будто они движутся.

расширять

Ну, с вышеописанным методом, т.е.transform: scale()Сотрудничатьtransform-origin, мы можем начать изменять начальное и конечное состояние анимации по желанию. Примените их к другим эффектам, несколько простых эффектов:

othertraorigin

Демонстрация CodePen — преобразование: масштабирование и преобразование исходного положения управления анимацией

Примечательные моменты

Есть еще несколько интересных моментов, можете попробовать и подумать над этим:

  • попробуйте изменить два состоянияtransition-timing-functionЧтобы сделать функции, вы можете сделать анимацию более плавной;
  • Обратите внимание, что строкаtransitionустановленtransition: transform .5sвместоtransition: all .5s, и испытайте различные эффекты, производимые двумя способами письма.

наконец

Я лично впервые увидел этот метод вCss эффект наведения меню. Если у вас есть лучший метод, добро пожаловать, чтобы обсудить его вместе.

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

Ну вот и конец этой статьи, надеюсь она вам поможет :)

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

Категории