Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма HTML5 и CSS3
HTML5 и CSS3
8. Динамика с транзишъни и анимации

Интерактивна икона

Курсове HTML5 и CSS3 Седмица 8 - Динамика с транзишъни и анимации
-51,13 € за ВЕЛИКДЕН: Вземи курс "HTML5 и CSS3" за    127,31 € 76,18 €  ВИЖ ТУК

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Как да направите иконата интерактивна с transition

Интерактивността прави сайта по-жив и ангажиращ. С помощта на CSS можем да променим външния вид на иконата при hover, като я направим черно-бяла и я завъртим плавно. Най-важното е, че transition осигурява плавен преход, вместо рязка промяна на стиловете.

Стъпка по стъпка: черно-бял ефект и завъртане

  1. Изберете иконата (снимката) чрез CSS селектор.
  2. Добавете :hover състояние.
  3. В :hover задайте filter: grayscale(100%), за да стане изображението черно-бяло.
  4. Добавете и transform: rotate(360deg).
  5. За плавен ефект добавете transition към основния елемент:
    • за filter с продължителност 1 секунда
    • за transform с продължителност 1 секунда
  6. За по-добра съвместимост с Chrome използвайте и префикс -webkit- за filter.

След тези стъпки иконата ще се завърта и ще преминава в черно-бял режим плавно при преминаване с мишката.

Използвани CSS свойства

  • filter – Прилага визуални ефекти като grayscale(100%) за черно-бяло изображение.
  • -webkit-filter – Префикс за съвместимост с Chrome при използване на filter.
  • transform – Позволява трансформации като rotate(360deg).
  • transition – Създава плавен преход при промяна на свойства (напр. 1s продължителност).

Дискусия към урока