Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?
Розробка та створення сайтів » Блог » Анімація » 3 приклади анімації картинок на css

3 приклади анімації картинок на css

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 4-09-2016, 22:33 2 901 0
3 приклади анімації картинок на css

Технологія CSS3 дозволяє створювати красиві інтерактивні сайти без допомоги jаvascript.

3 приклади анімації картинок на css:

У цій статті ми створимо красиві ефекти при наведенні на картинку. Ці ефекти ідеально підійдуть для галереї та допоможуть раціонально розмістити інформацію.

Приклад 1

Для першого прикладу ми будемо використовувати ненумерованний список (ul), всередині якого розташуємо заголовок і опис картинки. Розмітка для прикладу:

Приклад 2

У другому прикладі картинка буде з'їжджати вниз при наведенні, показуючи при цьому заголовок і опис.
Розмітка дуже схожа на попередній приклад. Але тепер використовується клас demo-2 і новий клас zero:

 

Приклад 3

Для останнього прикладу створимо ефект повертання навколо осі: при наведенні на картинку, вона буде обертатися навколо своєї осі і показвать опис і заголовок.
На цей раз розмітка трохи зміниться. Ми будемо використовувати HTML5 елемент figure разом з figcaption. І, як зазвичай, клас змінився на demo-3:

 

 

 
 

Розробка сайтів | Створення сайтів

Коментарі

⤹ Залишити свій коментар ⤸

  • Натисніть на зображення, щоб оновити код, якщо він нерозбірливий
Останнє на сайті
  • seo

    Українські каталоги для реєстрації сайту

    coments/244 vievs/ 1
  • faq

    Які існують російські домени?

    coments/86 vievs/ 0
  • seo

    Українська двигун для сайту - Ardilla-CMS

    coments/118 vievs/ 0
Останнє в магазині
Картинка в meta з додаткового поля Картинка в meta з додаткового поля / Платні модулі DLE
Коментарі
Популярне на сайті

Для усіх любителів Анекдотів українською існує чудовий сайт з безліччю приколів, смішних історій та відео: Анекдоти

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */