@an_tropa

Эффекты при наведении на элемент?

Господа, ищу вашей помощи!
Вот сайт:
https://danieldefo.ru/

На нем есть одна кнопка интересная при наведении на которую, у сайта появляется интересный эффект. Кто в курсе, подскажите пожалуйста как это реализовано?
Сама кнопка:
5e754566427ff994303556.png
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
SeaInside
@SeaInside
10 лет пилю все эти штуки
По наведению на кнопку контентной части добавляется класс "interference", который запускает анимацию:
.interference {
  animation: interference 0.5s linear;
}

Сама анимация простейшая:
@keyframes interference {
  20% {
    filter: blur(2px);
    transform: skewY(-1.2deg)
  }
  30% {
    filter: blur(2px);
    transform: skewY(1.2deg)
  }
  100% {
    filter: blur(0px);
    transform: skewY(0)
  }
}


Заодно псевдоэлементом добавляется фиксированный фон, который мигает также с помощью свойства animation.
Код форматировать лень, гуглите "css blink animation".
Вот картинка: https://danieldefo.ru/styles/star/glitch-overlay.png

Резюме: дизайнерская задумка ничего (хотя мне сама иконка больше нравится - есть что-то такое мистическое), а чисто технически это делать - скука смертная.

Откройте консоль, добавьте класс сюда и изучайте инспектор.

5e75480155473551632663.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы