Полоски при наведенні

Оригінал: https://css-tricks.com/uniqlo-stripe-hovers/

Переклад: Влад Мержевич

Для рекламних боксів на Uniqlo.com використовувалися анімовані смуги, які з'являлися при наведенні курсора миші. Це дуже вражаюче, на мою думку. Ймовірно, саме тому їм хотілося, щоб це працювало в більшості браузерів, тому вони використовували для створення ефекту анімований GIF. Розмір файлу менше 4 Кб, але, як ви знаєте, це додатковий HTTP-запит. Давайте повторимо цей ефект в сучасному покращеному стилі: менше підтримки браузерами, але більш ефективно.

HTML

Ми можемо зробити схоже лише для батьківського елемента, змінюючи фон на анімовані смуги при :hover. Однак смуги на Uniqlo з'являються плавно, а не просто миттєво. На жаль, не існує такого поняття, як background-opacity, що допомагав би нам зробити перехід.

Можна використовувати псевдоелемент ::before та opacity для створення плавного переходу, але підтримка transition для псевдоелементів тільки починає впроваджуватися.

Тому цього разу використаємо додатковий елемент для роботи з нашим особливим фоном.

CSS

У .product є невеликі поля, які насправді є широкою білою рамкою, де мають з'являтися анімовані смуги.

SEO текст:

Навчіться створювати ефект анімованих смуг для вашого веб-сайту за допомогою CSS. Додайте цікавість та динаміку до ваших рекламних блоків.