Кнопка з відблиском: як зробити анімований відблиск на чистому CSS

🗓️ Оновлено: 09.08.2022
💬Коментарів: 0
👁️Переглядів: 1616

У цій статті ви дізнаєтесь, як зробити анімований відблиск на кнопці. Робити це будемо за допомогою CSS-анімації, використовуючи keyframes. Без JS, лише HTML та CSS.

Демо

А тепер давайте по порядку. Для початку створимо кнопку в html:

<div class="btn">Кнопка з відблиском</div>

Потім додамо їй трохи стилів у CSS:

.btn {
  display: inline-block;
  position: relative;
  color: #fff;
  font-size: 1.5rem;
  background: linear-gradient(to right, #0162c8, #55e7fc);
  padding: 1rem 1.75rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

Що ми тут зробили та навіщо? По-перше, ми прописали position: relative, тому що надалі використовуватимемо псевдоелемент (наш відблиск) і йому потрібно буде брати батьківський блок (кнопку) за орієнтир. Також ми задали лінійний градієнт для фону, змінили розміри та колір тексту, закруглили краї та додали відступи. Але головне, ми додали overflow: hidden – це означає, що все, що виходитиме за межі цього елемента, буде приховано.

У результаті, у нас вийшла така кнопка:

Але вона поки що без відблиску. Давайте додамо його.

Як це буде реалізовано? Ми створимо псевдоелемент, якому задамо CSS властивості, які зроблять його схожим на відблиск. А потім, кожні п’ять секунд, ми запускатимемо анімацію, яка пересуватиме наш псевдоелемент (відблиск). Таким чином, ми створимо ефект відблиску на кнопці.

Приступимо.

Створимо псевдоелемент :before і пропишемо для нього деякі CSS властивості:

.btn:before {
  content: '';
  width: 100%;
  height: 200%;
  position: absolute;
  top: 0; left: 0;
  opacity: 0.5;
  filter: blur;
  background: linear-gradient(to left, transparent 0%, #fff 40%, #fff 60%, transparent 100%);
  transform: translate(-100%, -25%) rotate(10deg);
  animation: blick 5s infinite;
}

У перших рядках ми задали розміри та координати нашого відблиску. Він буде вдвічі більше кнопки по висоті та знаходиться з лівого боку. Далі ми додали невелике розмиття і зробили прозорішим.

Зверніть увагу на фон, який ми прописали. З нуля до 40% ширини відблиску (а він займає 100% ширини кнопки), фон буде прозорим, потім з 40% ширини до 60% фон буде білим. І відповідно з 60% до 100% ширини – прозорий фон.

За допомогою transform ми його посунули за межі нашої кнопки, а також трохи повернули.

А за допомогою властивості animation ми вказали, яку анімацію будемо застосовувати до цього псевдоелементу. Також вказали час, за який має бути виконана анімація та задали значення infinite, що означає нескінченна анімація.

Тепер настав час прописати keyframes для анімації.

Keyframes – ключові точки анімації. Keyframes допомагає нам керувати проміжними етапами під час анімації.

@keyframes blick {
  0% {
    transform: translate(-100%, -25%) rotate(10deg);
  }
  20% {
    transform: translate(100%, -25%) rotate(10deg);
  }
  100% {
    transform: translate(100%, -25%) rotate(10deg);
  }
}

Давайте тут детальніше зупинимося.

Ми задали, що наш відблиск буде розпочинати анімацію, перебуваючи за межами кнопки по осі X (translate(-100%, -25%)). Через 20% (20 відсотків від 5 секунд – одна секунда) відблиск (псевдоелемент) буде вже у своєму первісному положенні по осі X (translate (100%, -25%)). Тобто він за одну секунду пройде вздовж нашої кнопки. А далі замре. Тобто 80%, що залишилися (або 4 секунди він буде перебувати в статичному положенні, але візуально ми його не побачимо. А потім анімація повториться.

Наприкінці хочу нагадати, що я не використовувал префікси для keyframes та інших CSS властивостей. Але ви не забудьте про них.

На цьому все. Пропоную подивитися відео, де я ще раз пояснюю, як зробити анімований ефект відблиску на кнопку.

Стаття була корисною?
👍
Так - 6
👎
Ні - 0
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18285
Поява елементів при скролі
Переглядів: 16839
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6953
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6789
Як зробити ефект натискання кнопки на CSS
Переглядів: 6209
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab