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

1. HTML+CSS

1
HTML+CSS
Знакомство.
Создание простых объектов
Урок 1

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

Решение
21

22.

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

23.

Работаем с CSS
23

24.

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

25.

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

26.

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

27.

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

28.

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

29.

Решение
29

30.

Решение
30

31.

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

32.

Работаем с CSS
32

33.

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

34.

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

35.

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

36.

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

37.

Работаем с CSS
37

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

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

51.

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

52.

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

53.

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

54.

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

55.

Решение
55

56.

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

57.

Работаем с CSS
57

58.

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

59.

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

60.

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

61.

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

62.

Решение
62

63.

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

64.

Работаем с CSS
64

65.

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

66.

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

67.

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

68.

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