HTML+CSS. Создание простых объектов презентация

2
Знакомство с HTML и CSS

3
Применение HTML и CSS

4
Что мы сегодня сделаем?

5
Открываем Sublime Text 3

Сохраняем документ
6

7
Настраиваем рабочую среду

8
Создаем основу документа

9
Структура HTML страницы

Создаем CSS документ
10

Настраиваем рабочую среду
11

Работаем с CSS
12
getcolor.ru

Cохраняем документы
13

14
Открываем веб страницу

Создаём анимацию
15

16
Проверяем анимацию

17
Дополнительные свойства анимации

18
Дополнительные свойства анимации

19
Дополнительные свойства анимации

20
Задание
Попробуйте сделать так, чтобы квадрат один цикл вращался по часовой, а затем против часовой и т.д. (воспользуйтесь свойством animation-direction: alternate) Сделайте изменение цветов с желтого на красный.

Решение
21

22
Создаем класс

23
Работаем с CSS

24
Проверяем объект

25
Задаем движение круга

26
Меняем цвета круга

27
Проверяем анимацию

28
Задание
Создайте новый круг. Попробуйте сделать анимацию прыгающего мяча (воспользуйтесь свойством transform: translateY). Добавьте изменение цвета. Анимация бесконечна.

Решение
29

Решение
30

31
Создаем класс

32
Работаем с CSS

33
Проверяем объект

34
Задаем траекторию движения

35
Проверяем анимацию

36
Создаем новый класс

37
Работаем с CSS

38
Создаем анимацию

39
Проверяем анимацию

40
Продолжаем урок

Создаем HTML документ
41

Создаем CSS документ
42

Настраиваем рабочую среду
43

44
Создаем основу документа HTML

45
Структура HTML страницы

Работа с CSS
46
getcolor.ru

Открываем web страницу
47

48
Создаём анимацию

49
Открываем web страницу

50
Дополнительные свойства анимации

Открываем web страницу
51

52
Дополнительные свойства анимации

Открываем web страницу
53

54
Задание
Попробуйте сделать так, чтобы квадрат один цикл вращался по часовой, а затем против часовой и т.д. (воспользуйтесь свойством animation-direction: alternate) Сделайте изменение цветов с зеленого на желтый

55
Решение

56
Создаем класс

57
Работаем с CSS

Открываем web страницу
58

59
Задаем анимацию

Открываем web страницу
60

61
Задание
Сделайте так, чтобы на каждом ключевом кадре анимации круг менял цвет в процессе движения

62
Решение

63
Создаем класс

64
Работаем с CSS

65
Создаем анимацию

Открываем web страницу
66

67
Создаем анимацию