1 of 26

Эффекты. Анимация

Павел Радкевич

​

2 of 26

Эффекты

  • Градиентный фон
  • Тень для блока
  • Тень для текста
  • Эффекты трансформации (поворот, наклон, смещение)

3 of 26

Градиент - фоновое изображение

  • Линейный градиент

​

  • Радиальный градиент

4 of 26

Линейный градиент

background-image: linear-gradient([направление], [первый цвет], [второй цвет], ...);

Направление задаётся ключевым словом либо в градусах:

to top, to left, to bottom, to right,

to top left, to top right, to bottom left, to bottom right

​

или

​

30deg, -90deg, 180deg, ...

5 of 26

Линейный градиент

6 of 26

Линейный градиент

7 of 26

Линейный градиент

8 of 26

9 of 26

Радиальный градиент: circle, ellipse

background-image: radial-gradient([позиция тип], [первый цвет], [второй цвет], ...);

Позиция:

at top left = at left top = at 0% 0% (в левом верхнем углу);

at top = at top center = at center top = at 50% 0% (по центру вверху);

at right top = at top right = at 100% 0% (в правом верхнем углу);

at left = at left center = at center left = at 0% 50% (по левому краю и по центру);

at center = at center center = at 50% 50% (по центру) — это значение по умолчанию;

at right = at right center = at center right = at 100% 50% (по правому краю и по центру);

at bottom left = at left bottom = at 0% 100% (в левом нижнем углу);

at bottom = at bottom center = at center bottom = at 50% 100% (по центру внизу);

at bottom right = at right bottom = at 100% 100% (в правом нижнем углу).

​

10 of 26

Радиальный градиент

11 of 26

Радиальный градиент

12 of 26

Радиальный градиент

13 of 26

Тень блока

box-shadow: (inset) [смещение по X], [смещение по Y], [радиус размытия], [толщина], [цвет]

14 of 26

15 of 26

Тень текста

text-shadow: [смещение по X], [смещение по Y], [радиус размытия], [цвет]

16 of 26

17 of 26

Трансформация элементов

transform:

  • rotate([угол])
  • scale([множитель]) /* scaleX(), scaleY() */
  • skew([угол]) /* skewX(), skewY() */
  • translate([позиция]) /* translateX(), translateY() */

​

18 of 26

transform: rotate()

19 of 26

transform: scale()

20 of 26

transform: skew()

21 of 26

transform: translate()

22 of 26

Анимации

transition: [анимация1], [анимация2], …

анимация: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]

transition-property: all | none | свойство1, свойство2, …

transition-duration: 2.1s /* длительность анимации */

transition-timing-function /* правила анимации */

transition-delay: .3s /* задержка перед анимацией */

23 of 26

transition-timing-function

  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear
  • step-start
  • step-end
  • steps()
  • cubic-bezier()

​

https://jsfiddle.net/n3g6qjye/2/

24 of 26

Анимация затемнения фона: https://jsfiddle.net/crzsh025/2/

Пример

25 of 26

Внеклассное чтение

http://htmlbook.ru/css/cat/gradient

http://htmlbook.ru/css/box-shadow

http://htmlbook.ru/css/text-shadow

http://htmlbook.ru/css/transform

http://htmlbook.ru/css/transition

http://htmlbook.ru/css/transition-timing-function

​

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy

26 of 26

Практика

Анимация кнопки “Мне нравится”

При первом нажатии меняется цвет иконки и ненадолго увеличивается размер, после чего возвращается к исходному (отметка “Мне нравится” поставлена)

При втором нажатии меняется только цвет (отметка “Мне нравится” снята).