Css3 бібліотека - 40+ ефектів при наведенні
Щоб привернути увагу користувачів є багато способів: починаючи від найбільш набридливих і лякають, я маю на увазі спливаючі вікна, які не можна закрити і переадресовують на інші сайти, і більш простих, таких як цікаве виділення посилання. Ось останній випадок ми і розглянемо в цьому уроці. У цьому уроці ми розглянемо спеціальну бібліотеку написану на CSS3, яка дозволяє виділяти посилання при наведенні на неї. А це робить більш інтерактивний зв`язок з користувачем.
Відео: Woocommerce Shop Hover Effects Супер ефекти плагін CSS3
За посиланнями, розташованим нижче, ви можете подивитися приклади, а також завантажити демо версію:
Подивитися прімерСкачать
Як користуватися? - 40+ ефектів при наведенні
HTML частина
Можливо розробники цієї бібліотеки іноді оновлюють її, тому рекомендую скачати її звідси - перейти (Останню версію).
Відео: Animate.css - при наведенні на елемент
Вам потрібен файл hover-min.css - це зменшена версія бібліотеки. Його необхідно підключити на початку вашого сайту:
12345 | lt;headgt; ..lt;link href="Путь_до_файла / hover.css" rel="Stylesheet"gt; ..lt;/headgt; |
Потім залишилося лише додати ефект для нашого лінку. Наприклад ось код нашого лінку:
1 | lt;a href="#" class="Btn"gt; Кнпокаlt;/agt; |
Стиль для прикладу я вибрав ось такий:
width = "650" height = "117" alt = "Анімація при наведенні на посилання" class = «alignnone size-full wp-image-3373" / gt;
висновок
Ще один непоганий набір ефектів які можна використовувати у своїх проектах. А все що потрібно - це підключити бібліотеку CSS3!
Також про ефекти при наведення на посилання вам будуть цікаві такі статті:
- Приголомшливі ефекти CSS3 при наведенні
- Оригінальний ефект CSS3 при наведенні на ...
- Як красиво оформити посилання
Успіхів!
З повагою, Юрій Німець