- Описуємо стилі загальної структури кнопки
- Оформляємо іконку в CSS
- Описуємо анімацію і пульсуючий ефект кнопки
- Описуємо Анімацію пульсуючого елемента
Я вважаю, багато хто з вас зустрічали подібні кнопки на сайтах, але можливо не всі знають, як реалізувати такий анімований ефект на CSS. Дивіться, вчіться і обов'язково діліться своїми прикладами в коментарях під відео.
See the Pen BmqQoX by Denis ( @Dwstroy ) on CodePen .
Що б не витрачати ваш час я підготував архів, в ньому знаходиться index файл з підключенням css, в CSS прописані два рядки, встановив шрифт і підключив картинку на задній фон, яка знаходиться в папці img.
Відкриваємо index і опишемо каркас кнопки. Між тегами body вставляємо блок з класом. dws у якого основне призначення відцентрувати кнопку посередині екрану. Потім слід кнопка з класом .pulse, в ній вкладемо два блоки, перший блок з класом .phone розмістимо в ньому іконку, і наступний для тексту з клас .text.
<Wrapper> div.dws> div.pulse> div.phone + div.text </ wrapper>
Пропишемо текст «Кнопка зв'язку», і перейдемо на сайт.
Відберемо іконку, копіюємо її код <i class = "fa fa-phone"> </ i> і вставляємо в відведеному блоці c класом .phone.
Далі, що б вона відобразилася, підключимо додатковий файл.
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Імпульсний ефект з використанням CSS3 Transform Scale </ title> <link href = "https: // maxcdn .bootstrapcdn.com / font-awesome / 4.7.0 / css / font-awesome.min.css "rel =" stylesheet "> <link rel =" stylesheet "type =" text / css "href =" style.css " > </ head> <body> <wrapper> <div class = "dws"> <div class = "pulse"> <div class = "phone"> <i class = "fa fa-phone"> </ i> </ div> <div class = "text"> Кнопка зв'язку </ div> </ div> </ div> </ wrapper> </ body> </ html>
На цьому, з файлом index поки роботи закінчені, переходимо до опису стилів.
Описуємо стилі загальної структури кнопки
Відобразимо кордону пульсуючого блоку за допомогою outline в 1 пік., Задамо розміри блоку в 90 пік. Текст з іконкою робимо білим кольором, центруем його по середині, додаємо колір фону, а за допомогою border-radius в 50% робимо закруглення.
.pulse {outline: 1px solid # FAA21A; width: 90px; height: 90px; color: #fff; text-align: center; background: # 5CC2EA; border-radius: 50%; }
Для зручності всі з позиціонуємо по центру екрана.
.dws {position: absolute; top: 50%; left: 50%; transform: translate (-50%, -50%); }
Сховаємо текст, що б він не заважав.
.text {opacity: 0; }
Оформляємо іконку в CSS
Позиціонуємо іконку абсолютно блоку, для цього блоку .pulse додамо position: relative, а класу .phone position: absolute. Відобразимо кордону блоку outline: 1px solid # 51ff1b, збільшимо іконку до 50 пік, робимо її посередині, прописуємо розміри блоку і вирівнюємо по вертикалі.
.phone {position: absolute; outline: 1px solid # 51ff1b; font-size: 50px; text-align: center; width: 90px; height: 90px; line-height: 94px; }
Поки приховуємо даний блок opacity: 0; , І оформимо текст.
Позиціонуємо текст абсолютно блоку, виділимо кордону outline, робимо великими літерами, збільшимо жирність, центруем по вертикалі, розмір шрифту робимо в 15 пік.
.text {position: absolute; outline: 1px solid # 51ff1b; text-transform: uppercase; font-weight: 700; top: 28px; font-size: 15px; / * Opacity: 0; * /}
Наступним завданням, створюємо анімацію при наведенні.
Описуємо анімацію і пульсуючий ефект кнопки
За допомогою трансформації transform: scaleX (-1) відобразимо текст дзеркально по осі Х, використовуючи псевдоклас hover повернемо його в початкове положення transform: scaleX (1). Додаємо анімацію при наведенні, і анімацію в момент коли прибираємо курсор миші transition: .5s ease-in-out.
Потім залишається елемент в початковому положення приховувати, а при наведенні його відображаємо.
font-size: 15px; transform: scaleX (-1); transition: .5s ease-in-out; opacity: 0; } .Pulse: hover .text {transform: scaleX (1); transition: .5s ease-in-out; opacity: 1; }
Приступимо до анімації телефону. Відображаємо іконку, пишемо animation, встановлюємо кадр і задаємо час анімації в 0.9 сек. Прописуємо властивість ease-in-out, що б анімація повільно починалася і також закінчувалася, за допомогою infinite робимо програвання анімації нескінченно.
animation: phone .9s ease-in-out infinite; / * Opacity: 0; * /}
Далі описуємо ключовий кадр, де за допомогою трансформації схиляємо в сторони трубку.
@keyframes phone {0%, 100% {transform: rotate (-20deg); } 50% {transform: rotate (21deg); }}
При наведенні, задіємо трансформацію, зменшуємо елемент іконки в нуль, приховуємо його за допомогою opacity, задіємо transition в 0.5s для плавного зникнення.
.pulse: hover i {transition: .5s ease-in-out; transform: scale (0); opacity: 0; }
А для того щоб вона також плавно з'являлася, прописуємо для елемента іконки transition в 0.5s.
.phone i {transition: .5s ease-in-out; }
Прибираємо обведення outline, які задавали раніше, і приступимо до опису пульсуючого елемента.
Описуємо Анімацію пульсуючого елемента
Створюємо псевдоелемент :: before, пишемо content, позиціонуємо його абсолютно, пріпішем border в 1 пік. задаємо координати по відношенню кола, закруглюємо, і прописуємо анімацію кадру.
Задаємо назву кадру pulse, робимо його в 1.8s, задаємо рівномірність анімації протягом усього часу, і зациклюватися.
.pulse :: before {content: ''; position: absolute; border: 1px solid # 29AEE3; left: -20px; right: -20px; top: -20px; bottom: -20px; border-radius: 50%; animation: pulse 1.8s linear infinite; }
Нижче описуємо кадр самої анімації.
@keyframes pulse {0% {transform: scale (0.5); opacity: 0; } 50% {opacity: 1; } 100% {transform: scale (1.2); opacity: 0; }}
Додаємо ще один псевдоелемент .pulse: hover :: after, з такими ж значеннями і для того що б його відобразити, окремо для кожного з псевдоелемента :: after задаємо затримку в пів секунди.
.pulse :: after {animation-delay: .5s; }
Для того що б вони спрацьовували по наведенню робимо подія: hover і в початковому положенні робимо елементи не видимими.
border-radius: 50%; animation: pulse 1.8s linear infinite; opacity: 0; }
В принципі кнопка готова, можна також додати додатково блок для курсора, після натискання на який будемо виконувати якісь дії.
<Div class = "bloc"> </ div>
У css, опишемо класу .bloc стилі, але для початку згрупуємо повторюють елементи.
.pulse, .bloc, .phone {position: absolute; width: 90px; height: 90px; border-radius: 50%; color: #fff; text-align: center; }
описуємо .bloc
.bloc {cursor: pointer; z-index: 1; overflow: hidden; }
Додамо зміни основного фону кнопки на більш темніше
.pulse: hover {background: # 29AEE3; }
Робимо плавність її появи.
.pulse {position: relative; color: #fff; background: # 5CC2EA; transition: .5s; }
В принципі на цьому все, отримали простеньку анімацію, на базі якої ви вже зможете робити свої іконки з пульсуючому анімованим ефектом.
Використовуйте, впроваджуйте знання, які придбали, і обов'язково в коментарях діліться своїми прикладами, що у вас вийшло.
Урок підготував Горєлов Денис, до зустрічі в наступних відео по CSS.