УРОК 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

  1. Яркость filter: brightness(2);
  2. Насыщенность filter: saturate(150%);
  3. Оттенок освещения: filter: hue-rotate(250deg);
  4. Контрастность filter: contrast(160%);
  5. Прозрачность: filter: opacity(80%);
  6. Сепия: filter: sepia(0.6);
  7. Оттенки серого:filter: grayscale(0.6);
  8. Тень: filter: drop-shadow(5px 5px 5px #333);
  9. Размытие: filter: blur(2px);
  10. Инверсия: filter: invert(100%);

 

Следует напомнить, что не все браузеры поддерживают фильтры, поэтому не забывайте добавлять префиксы -webkit-, -moz- и т.д.

-webkit-filter: brightness(150%)

 

Для более плавного изменения эффектов добавляйте атрибуты :

transition-duration: 2s;

transition-timing-function: ease-out;

Примеры использования визуальных эффектов

 Яркость (увеличение яркости в 2 раза)

7-aya1

 Контраст (увеличение контраста в 3 раза)

 

 2015

 Насыщенность (увеличение насыщенности в 3 раза)

День открытых дверей Института экономки и предпринимательства

Переливание цветов (hue-rotate — 400 градусов)

для заставки

 Сепия с параметром 0.7 (эффект старой фотографии). 

Cлужба психологического сопровождения для студентов ИЭП

 Оттенки серого с параметром 0.7

Довбыш

Добавить комментарий