CSS Icon PULSE 💓 эффект 👈
CSS Icon PULSE 💓 hover эффект 👈
Я думаю вы встречали кнопки чатов на сайтах, которые пульсируют.
Сегодня я покажу Вам как сделать такой же эффект. В нашем примере он будет выполнятся единократно при наведении на иконку, но вы можете указать infinite и анимация будет повторяться бесконечно.
Разметка как обычно ссылки и кнопки с классами .icon. Внутри которых svg-иконки.
Класс .icon представляет из себя круг с полупрозрачными фоном и transition для трансформации и фона.
Псевдоэлемент - это также круг, того же размера как и родительский элемент, который скрыт через opacity, уменьшен через scale и содержит тень.
При наведении класс .icon меняет фон на более прозрачный и уменьшается.
К псевдоэлементу применяем анимацию длительность 1.5s с задержкой начала анимации на 75ms. Задержка нужна, так как первой отрабатывает анимация уменьшения элемента (ссылки/кнопки).
Анимация изначально делает наш элемент чуть видимым, на 40% доводим прозрачность до 0.5 и меняем одну тень на множественные. К 100% прозрачность ставим в 0, увеличиваем элемент в 1.5 раза, сохраняя предыдущую тень.
https://github.com/Pots1988/icon-hove... - ссылка на эффект.
#css #html #web #webdevelopment #frontend #htmlcss #html5 #htmltutorial #htmlelements #css3 #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects
#webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #javascript #vue #react #angular #svelte #vanillajs #js #animation #cssawesome #learncss #course #programming #crash_course
Подписывайтесь на меня в соц. сетях:
👨💻 LinkedIn - / maksymfariga
📷 Instagram - / maksym_fariga (@maksym_fariga)
📖 Facebook - / maksymfariga
🐤 Twitter - / fariga_m
🛩 Telegram - https://t.me/web_education_new
🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉 • А px, то не настоящий! PPI и DPI, DP... ✍️
🪃 Не знаете какие есть единицы для задания углов или когда и какие применять? 👉 • CSS Units: Deg, Rad, Grad, Turn . ✍️
📏 Абсолютные единицы измерения в CSS? 👉 • Нужны ли они нам? Абсолютные единицы ... . ✍️
📐 Относительные единицы измерения ex, ch, ic, lh 👉 • Зачем они были добавлены? CSS Units: ... ✍️
🔍 Не знаете что выбрать REM или EM 👉 • Вы точно не знаете зачем мы используе... ✍️
💻 Все про viewport, vh, vw, vmin, vmax 👉 • 😏 CSS Viewport Units: vw, vh, vmin, v... ✍️
