Тема фронтенд-анимации (3): спецэффекты знойной кнопки

CSS

Эта статья взята из"Блог сердечного загара"из«Анимационный дизайн · Эффекты кнопок», больше статей оGithub

Добро пожаловать в Exchange и Star

Список спецэффектов

слип-бокс:

желе:

пульс:

вспышка:

пузырь:

эффект раздвижной коробки

визуализация

принцип

Поскольку элемент кнопки может использовать псевдоэлементы «до/после», можно реализовать наложения в динамических графиках с помощью псевдоэлементов.

Чтобы избежать перерисовки перерисовки, направление движения скользящего блока вертикальное, поэтому используйтеscaleYАтрибуты. Для направления анимации вам нужно использоватьtransform-originИзмените источник анимации.

Код

HTML:

<button>xin-tan.com</button>

CSS:

button {
  outline: none;
  border: none;
  z-index: 1;
  position: relative;
  color: white;
  background: #40a9ff;
  padding: 0.5em 1em;
}

button::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fa541c;
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 0.4s ease-in-out;
}

button:hover {
  cursor: pointer;
}

button:hover::before {
  transform-origin: center top;
  transform: scaleY(1);
}

эффект желе

визуализация

Принцип и Кодекс

Эффект желе можно разделить на 5 частей, поэтому его не легко пройтиtransitionдобиться, с помощьюanimation. И момент времени, когда анимация запускается, - это когда мышь приближается, поэтомуanimationбыть в:hoverзаявление в.

button {
  z-index: 1;
  color: white;
  background: #40a9ff;
  outline: none;
  border: none;
  padding: 0.5em 1em;
}

button:hover {
  cursor: pointer;
  animation: jelly 0.5s;
}

Приступим к написанию спецэффектов желейной анимации. Эту анимацию можно разбить на 4 части: «Начало => Сжатие => Сжатие => Возврат в исходное состояние». Сожмите и хлюпайте здесь черезscaleДля достижения код выглядит следующим образом:

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }

  33% {
    transform: scale(0.9, 1.1);
  }

  66% {
    transform: scale(1.1, 0.9);
  }
}

Сделайте еще один шаг вперед

Вышеупомянутая динамика была смоделирована хорошо.Если 4 части изменить на 5 частей: «Исходное => Сжатие => Сглаживание => Сжатие => Возврат в исходное состояние».Визуально будет эффект пружины, как эффект прессования желе вручную:

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }

  25%,
  75% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.1, 0.9);
  }
}

импульсный эффект

визуализация

Принцип и Кодекс

Во-первых, давайте избавимся от стиля кнопки по умолчанию. Обратите внимание на настройку кнопкиz-indexатрибут и заставить его действовать, убедитесь, что он больше, чем::beforeизz-indexАтрибуты,Предотвратить покрытие элементов dom псевдоэлементами.

button {
  position: relative;
  z-index: 1;
  border: none;
  outline: none;
  padding: 0.5em 1em;
  color: white;
  background-color: #1890ff;
}

button:hover {
  cursor: pointer;
}

Осталось установить псевдоэлемент. Потому что импульсный эффект создает впечатление, что он «выдолблен» для увеличения. Таким образом, объект измененияborderАтрибуты. Эффект пустотелости достигается за счет прозрачного фона.

button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 4px solid #1890ff;
  transform: scale(1);
  transform-origin: center;
}

Время начала анимации — когда мышь приближается, цвет на границе становится светлее, размер становится меньше, а прозрачность постепенно становится равной 0.

button:hover::before {
  transition: all 0.75s ease-out;
  border: 1px solid#e6f7ff;
  transform: scale(1.25);
  opacity: 0;
}

⚠️ переход и трансформация размещены вhoverПсевдоэлемент в состоянии, предназначенный для мгновенного возврата анимации в исходное состояние.

эффект вспышки

визуализация

Принцип и Кодекс

Реализация по-прежнему основана на псевдоэлементах. Эффект вспышки больше фокусируется на сопоставлении цветов. Суть анимации заключается в использованииrotateДля достижения эффекта «наклона» используйтеtranslate3dДля достижения эффекта «вспышки».

button {
  outline: none;
  border: none;
  z-index: 1;
  position: relative;
  color: white;
  background: #262626;
  padding: 0.5em 1em;
  overflow: hidden;
  --shine-width: 1.25em;
}

button::after {
  content: "";
  z-index: -1;
  position: absolute;
  background: #595959;
  /* 核心代码：位置一步步调整 */
  top: -50%;
  left: 0%;
  bottom: -50%;
  width: 1.25em;
  transform: translate3d(-200%, 0, 0) rotate(35deg);
  /*  */
}

button:hover {
  cursor: pointer;
}

button:hover::after {
  transition: transform 0.5s ease-in-out;
  transform: translate3d(500%, 0, 0) rotate(35deg);
}

⚠️translate3dПомимо предотвращения перерисовки перерисовки, он также может включить ускорение графического процессора для повышения производительности. Однако для того, чтобы облегчить описание ранее, общее использованиеtranslateАтрибуты.

Пузырьковые эффекты

визуализация

Принцип и Кодекс

Во-первых, отключите стиль элемента кнопки по умолчанию и настройте цветовую схему:

button {
  outline: none;
  border: none;
  cursor: pointer;
  color: white;
  position: relative;
  padding: 0.5em 1em;
  background-color: #40a9ff;
}

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

button {
  z-index: 1;
  overflow: hidden;
}

Последнее, с чем нужно иметь дело, — это эффект изменения псевдоэлементов.Спецэффект распространяется от центра к окружающему, поэтому он должен быть центрирован.

Для изменения размера или использованияscaleАтрибуты.

Поскольку он круглый,border-radiusУстановите его на 50%.

button::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #9254de;
  transform-origin: center;
  transform: translate3d(-50%, -50%, 0) scale(0, 0);
  transition: transform 0.45s ease-in-out;
}

button:hover::before {
  transform: translate3d(-50%, -50%, 0) scale(15, 15);
}

Изменить направление?

Эффект пузыря в примере кода должен распространяться от середины к четырем сторонам Что, если вы хотите распространиться из верхнего левого угла в нижний правый угол? Например, как показано на следующем рисунке:

Процесс очень прост,Просто измените исходное положение пузыря.

button::before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #9254de;
  /* 变化位置的代码 */
  top: 0;
  left: 0;
  transform-origin: center;
  transform: scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
  /* *********** */
}

button:hover::before {
  transform: scale3d(15, 15, 15);
}

Ссылка на ссылку

больше статей

Категории