УРОК 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
- Яркость filter: brightness(2);
- Насыщенность filter: saturate(150%);
- Оттенок освещения: filter: hue-rotate(250deg);
- Контрастность filter: contrast(160%);
- Прозрачность: filter: opacity(80%);
- Сепия: filter: sepia(0.6);
- Оттенки серого:filter: grayscale(0.6);
- Тень: filter: drop-shadow(5px 5px 5px #333);
- Размытие: filter: blur(2px);
- Инверсия: filter: invert(100%);
Следует напомнить, что не все браузеры поддерживают фильтры, поэтому не забывайте добавлять префиксы -webkit-, -moz- и т.д.
-webkit-filter: brightness(150%)
Для более плавного изменения эффектов добавляйте атрибуты :
transition-duration: 2s;
transition-timing-function: ease-out;
Примеры использования визуальных эффектов
Яркость (увеличение яркости в 2 раза)
Контраст (увеличение контраста в 3 раза)
Насыщенность (увеличение насыщенности в 3 раза)
Переливание цветов (hue-rotate — 400 градусов)
Сепия с параметром 0.7 (эффект старой фотографии).
Оттенки серого с параметром 0.7