Статьи

Animation на CSS

  1. Описуємо стилі загальної структури кнопки
  2. Оформляємо іконку в CSS
  3. Описуємо анімацію і пульсуючий ефект кнопки
  4. Описуємо Анімацію пульсуючого елемента

Я вважаю, багато хто з вас зустрічали подібні кнопки на сайтах, але можливо не всі знають, як реалізувати такий анімований ефект на 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.

Залишити коментар:

Новости