УРОК 8. ВИЗУАЛЬНЫЕ ЭФФЕКТЫ В CSS3

Эффекты трансформации в CSS3 задаются с помощью функции transform

Наиболее интересно использовать эффекты с псевдоклассом :hover, которые дают нужный эффект при наведении мыши.

Различные визуальные эффекты будем смотреть на следующих блоках.

структура код блока с несколькими вложенными

МАСШТАБИРОВАНИЕ

transform: scale ()

В функции scale используется либо один, либо два параметра (масштабирование по оси Х и Y).

transform: scale(2,2) увеличение изображение в 2 раза

Добавим в файл стилей следующее

#programm-1:hover{

transform: scale(1.5,1.5);

}

Изменять содержимое блок #programm-1 (без hover) не надо!

При наведении мыши на блок programm-1 его размер увеличивается в 1,5 раза. Но размер меняется резко.

Для более плавного изменения масштаба используется параметр transition-duration, задающий время в секундах или миллисекундах, длительность анимации перехода до её завершения.

Например,

transition-duration: 850ms; // длительность в миллисекундах

transition-duration: 2s; // длительность в секундах

Характер анимации масштабирования задаётся параметром transition-timing-function

Например, при значение ease-out анимация начинается быстро, к концу замедляется

transition-timing-function: ease-out;

В итоге, для блока #programm-1 в файле стилем укажем

#programm-1:hover{

transform: scale(1.5);

transition-duration: 850ms;

transition-timing-function: ease-out;

}

Другие значения параметра transition-timing-function:

ease — масштабирование начинается медленно, затем ускоряется и к концу движения опять замедляется.

ease-in – масштабирование медленно начинается, к концу ускоряется.

ease-in-out — масштабирование начинается и заканчивается медленно.

ВРАЩЕНИЕ

transform: rotate(360deg);

Задает вращение на 360 градусов.

Для блока #programm-2 пропишем код

#programm-2:hover {

transform: rotate(360deg);

transition-duration: 850ms;

transition-timing-function: ease-out;

}

Напомним, чтопараметры transition-duration и transition-timing-function создаютболееплавныйэффектвращения

СМЕЩЕНИЕ ЭЛЕМЕНТА

transform: translate

transform: translate(100px);

Этой функции можно передавать два значения

Используем код для блока programm-3

#programm-3:hover {

transform: translate(50px,50px);

transition-duration: 1s;

transition-timing-function: ease-in;

}

ИСКАЖЕНИЕ ЭЛЕМЕНТА

transform: skew (сдвиг)

Функция skew сдвигает элемент на определенный угол.

transform: skew(20deg);

#programm-4:hover {

transform: skew(20deg);

transition-duration: 1s;

transition-timing-function: ease-in;

}

Свойство transition-delay задает время ожидания перед запуском эффекта перехода. Значение 1s запускает анимацию через секунду.

Свойство transform-origin задает координаты точки (в процента, пикселях), относительно которой будет происходить трансформация элемента.

ФИЛЬТРЫ ДЛЯ БЛОКОВ И ИЗОБРАЖЕНИЙ

Filter – это свойство CSS3 с помощью которого можно изменять контраст и яркость изображений и блоков, делать изображение более насыщенным, менять цвета и многое, многое другое.

Добавляйте эти эффекты с атрибутов :hover