Практическое занятие №16

Наименование: Создание анимации с помощью CSS

1. Цель: Научиться средствами CSS3 создавать переходы и анимации на веб – страницах. Формировать компетенции ОК 1, ОК 2, ОК 4, ОК 8, ОК 9; овладеть знаниями и умениями для освоения ПК 1.2, ПК 1.3, ПК 1.4, ПК 1.5

2. Подготовка к занятию:

2.1 По указанной литературе повторить тему «Оформление веб – страниц средствами CSS», ответить на следующие вопросы:

- Что такое CSS? Роль каскадных таблиц стилей при создании веб страниц.

- Из каких частей состоит CSS - правило?

- Какими способами осуществляется подключение CSS к HTML - документу?

3. Литература:

3.1 Шомас Е.А. Веб – дизайн, учебное пособие. Самара, КС ПГУТИ, 2014

3.2 http://uroki-css.ru/ - Уроки CSS3

3.3 http://habrahabr.ru/company/nordavind/blog/209462/ - Трюки с CSS - анимацией

4. Перечень оборудования:

4.1 ПЭВМ, подключенные к сети Интернет;

4.2 Любой текстовый редактор, для написания кода;

4.3 Браузер, для просмотра веб – страниц.

5. Задание:

5.1 Создать HTML – документ, где разместить блок <div>. Подключить к документу таблицу стиля;

5.2 Применить эффекты для создания анимации средствами CSS3:

- Fade – эффект;

- Изменение цвета;

- Расширения и сужения;

- Вращения;

- Сглаживания углов;

- 3D – тени;

- Покачивание.

6. Порядок выполнения работы:

6.1 Эффекты управляются CSS свойством transition, поэтому сделаем стандартную разметку веб страницы:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Задаем высоту, ширину, цвет фона блоку чтобы видеть, что происходит и свойства перехода (transition):

div

{

width:483px;

height:298px;

background:#676470;

transition:all 0.3s ease;}

Применяем к блоку все предложенные в предложение эффекты перехода и анимации;

6.2 Выполнить задания лабораторное работы, основываясь на приложение к работе;

6.3 Составить отчет по практической работе в текстовом редакторе Word;

6.4 Показать преподавателю выполненное задание и отчет по работе.

7. Содержание отчета:

7.1 Наименование и цель работы;

7.2 Код – программы и скрин выполненного задания;

7.3 Ответы на контрольные вопросы;

7.5 Вывод о проделанной работе;

8. Контрольные вопросы:

8.1 Какое свойство применяется для создания эффекта перехода в CSS3?

8.2 С помощью какого свойства определяется анимация в CSS3?

8.3 В чем отличие между переходом и анимацией?

ПРИЛОЖЕНИЕ:

Fade – эффект

Отличный способ привлечение внимания. Реализуется эффект в два этапа: первое, устанавливается начальное значение прозрачности; далее – изменение состояния, например, при наведении курсора мыши:

.fade

{

opacity:0.5;

}

.fade:hover

{

opacity:1;

}

Не забудьте присвоить класс «fade» блоку <div>.

Изменение цвета

Задать соответствующий цвет, который заменит предыдущий:

.color:hover

{

background:#53a7ea;

}

Расширение и сужение

Для расширения элемента раньше нужно было изменять ширину, высоту или отступы, а сейчас можно использовать CSS свойство:

.grow:hover

{

-webkit-transform: scale(1.3);

-ms-transform: scale(1.3);

transform: scale(1.3);

}

Уменьшить элемент также просто, как и увеличить. Для увеличения используйте значение параметра больше 1, для уменьшения – меньше 1.

Вращение

Вращение элемента можно рассмотреть на следующем примере:

.rotate:hover

{

-webkit-transform: rotateZ(-30deg);

-ms-transform: rotateZ(-30deg);

transform: rotateZ(-30deg);

}

Сглаживание углов

Одним из популярных эффектов – это переход от квадратного элемента к круглому и наоборот. Реализуется с помощью изменения свойства border – radius:

.circle:hover

{

border-radius:50%;

}

D – тень

Эффект достигается с помощью свойства box – shadow и перемещения элемента вдоль оси х с помощью свойства transform и translate. Создается эффект поднятия элемента:

.threed:hover

{

box-shadow:

1px 1px #53a7ea,

2px 2px #53a7ea,

3px 3px #53a7ea;

-webkit-transform: translateX(-3px);

transform: translateX(-3px);

}

Покачивание

Эффект покачивания создается с помощью свойств @keyframes, animation и animation – iteration.

Сначала надо создать анимацию в стилях. Для совместимости необходимо использовать @-webkit-keyframes одновременно с @keyframes: