Потрясающие эффекты при наведении с помощью переменных CSS

внешний интерфейс CSS
Потрясающие эффекты при наведении с помощью переменных CSS

Недавно у меняСайт ГровераЯ обнаружил, что с забавной анимацией при наведении курсора я также получил некоторое собственное вдохновение. Анимация заключается в перемещении мыши над кнопкой подписки, и перемещение курсора отобразит соответствующий цветной градиент. Идея проста, но она выделяет кнопку, и люди сразу ее замечают, увеличивая вероятность нажатия.

Как мы можем добиться этого эффекта и сделать наш сайт выделяющимся? На самом деле, это не так сложно, как вы думаете!

отслеживать местоположение

Первое, что нам нужно сделать, это получить положение мыши.

document.querySelector('.button').onmousemove = (e) => {

  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop

  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)

}
  1. выделить элемент, дождаться, пока пользователь наведет на него мышку;
  2. Вычислить положение относительно элемента;
  3. Сохраните координаты в переменных CSS.

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

анимированный градиент

Мы начинаем с сохранения координат в переменных CSS, чтобы мы могли использовать их в любое время.

.button {
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;

  span {
    position: relative;
  }

  &::before {
    --size: 0;  

    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
  }

  &:hover::before {
    --size: 400px;
  }
}
  1. использоватьspanОберните текст, чтобы он не отображался над кнопкой.
  2. будетwidthиheightинициализирован как0px, когда пользователь наводит курсор на кнопку, измените его на400px. Не забудьте установить этот переход, чтобы он выглядел как ветер 💨 в одно мгновение;
  3. Используйте координаты для отслеживания положения мыши;
  4. существуетbackgroundприменить к свойствамradial-gradient, используя ближайшую окружность. Ближайшая сторона может покрывать все лицо.

результат

Это сработало! Добавьте его на свою HTML-страницу, и ваша крутая кнопка готова к использованию!

другие попытки

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

Это то, что я звонюbasicScrollДругие подобные анимации, сделанные сайтом:

Он более навороченный, и сделана кнопка с 3D-эффектом:

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

вопросы и ответы

зачем использоватьwidthиheightзаменятьtransform: scale()Для создания анимационных эффектов?

регулируяwidthиheightзначение для достижения эффекта анимации, на практике производительность очень низкая, вы должны попробовать использоватьtransformдостигать. Так почему я все еще держусь? Причина этого в том, что когда браузер отображает элементы в ускоренном слое (т. е. переходы), если кнопка имеет непрямоугольные края, слой может иметь неожиданные ошибки.

Редактор сказал следующее:Правда способов применения многоtransform, но некоторым браузерам это не нравится. Потерпеть поражениеtransformРеализовать функцию преобразования может быть хорошим решением проблемы. Существует такжеСпособы исправить Safariсайт может решить эту проблему.

зачем менятьtopиleftстоимость имущества без использованияtransform: translate()?

Смотрите объяснение выше 👆

Могу я подписаться на вас в Твиттере?

Конечно можешь~.