Как работает анимация наведения кнопки CSS?

Я пытаюсь понять этот блок кода для эффекта наведения кнопки, но все еще запутался.

Я могу понять, когда наводите курсор мыши на кнопку, .btn:hover::after нажимает и отображает кнопку фона (z = -1), а затем расширяет ее с помощью transform: scaleX(1.4) scaleY(1.6);

Однако, когда указатель мыши отодвигается от кнопки, фоновая кнопка также производит эффект «сжатия», как в transform: scaleX(1.4) scaleY(1.6); до нормального размера. Я просто не мог понять, какая строка кода управляет этой анимацией отвода мыши.

.btn:link,
.btn:visited {
  position: relative;
  border-radius: 10rem;
  display: inline-block;
  margin-top: 6rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  transition: all 0.2s;

}

.btn:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2rem  rgba(0, 0, 0, .3);
}

.btn:active {
  transform: translateY(-.1rem);
  box-shadow: 0 .5rem 1rem  rgba(0, 0, 0, .2);
}

.btn--white {

  background-color: #fff;
  color: #777;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
}

.btn--white::after {
  background-color: #fff;
}

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

css animation hover

31.07.2018 05:37

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Ответы 1

Секрет кроется в transition: all 0.2s в :link / :visited кнопки. transition не только передает в целевое состояние, но также из целевое состояние. По сути, именно transition управляет обеими сторонами анимации, которую вы видите.

Это по-прежнему transform, который применяет фактическое смещение, но transition отвечает за плавное затухание вперед и назад в зависимости от того, применяется ли transform или нет - без transition анимация будет просто «прыгать» между двумя состояниями.

body {
  background: black;
}

.btn:link,
.btn:visited {
  position: relative;
  border-radius: 10rem;
  display: inline-block;
  margin-top: 6rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  transition: all 0.2s;
}

.btn:hover {
  transform: translateY(-.3rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .3);
}

.btn:active {
  transform: translateY(-.1rem);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}

.btn--white {
  background-color: #fff;
  color: #777;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s;
}

.btn--white::after {
  background-color: #fff;
}

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

<a href = "#" class = "btn btn--white">Button</a>

TY. Не могли бы вы подробнее объяснить поведение (.btn - white) и (.btn - white :: after) в этой настройке?

— 31.07.2018 09:54

Конечно. Обычный .btn--white не делает ничего, кроме установки цвета фона (по умолчанию используется белый цвет, поэтому на самом деле он ничего не делает). .btn::after создает переходную границу вокруг кнопки, что придает ей пульсирующий эффект. Однако он не устанавливает цвет, поэтому его не видно. .btn--white::after добавляет цвет, поэтому вы видите пульсирующий эффект в белом цвете. Я предполагаю, что это сделано таким образом, чтобы вы могли указать, какого цвета должен быть эффект пульсации, выбрав соответствующий класс. Я также обновил свою скрипку, чтобы включить класс .btn-white, чтобы продемонстрировать пульсацию.

— 31.07.2018 22:29

Еще раз спасибо. Я пытаюсь использовать простые и понятные термины для описания этих кодов, поправьте меня, если я ошибаюсь:

— 31.07.2018 23:16

с .btn::after мы создали новый btn за ссылкой btn, но с .btn:hover::after как css выбрал новый btn с z-index = -1, чтобы действовать на него? Разве это не предполагается, что нужно выбрать элемент верхнего слоя, btn.link для эффекта зависания?

— 01.08.2018 05:10

31.07.2018 05:49