Основы гипертекстового представления интернет-контента

Задание:

Разметить через HTML фрагмент:

Исходный код

Выводы

В рамках представленной работы нами была сверстана страница при помощи языка разметки HTML. Нами были применены специальные символы, которые позволяют размечать те элементы, код от которых отсутствует в стандартной раскладке клавиатуры.

Лабораторная работа №2

«АНИМАЦИИ»

Задание:

1. Выполнить преобразования и анимацию в соответствии с вариан-

том двумя способами: с помощью свойств transition и animation .

2. Определить наиболее оптимальный вариант с точки зрения кода

и целесообразности использования свойства.

Объект: шестиугольник. При наведении элемент приближается

к зрителю и 4 раза поворачивается против часовой стрелки.

Результат проверки валидатора

Исходный код

Шестиугольник:

Листинг 2. HTML-код шестиугольника

.hexagon {

width: 90px;

/* Ширина*/

height: 50px;

/* Высота */

background: #3e92cc;

/* Фон */

position: absolute;

/* Позиционирование */

left: 50%;

/* Отступ слева в 50% от ширины экрана */

bottom: 50%;

/* Отступ слева в 50% от высоты экрана */

transition-duration: 0.8s;

/* Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. */

transition-property: transform;

/* Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.*/

}

.hexagon::before {

content: '';

/* Содержание */

position: absolute;

/* Позиционирование */

top: -25px;

/* Отступ сверху -25px */

border-left: 45px solid transparent;

/* Граница слева */

border-right: 45px solid transparent;

/* Граница справа */

border-bottom: 25px solid #3e92cc;

/* Граница снизу */

}

.hexagon::after {

content: '';

/* Содержание */

position: absolute;

/* Позиционирование */

bottom: -25px;

/* Отступ снизу -25px */

border-left: 45px solid transparent;

/* Граница слева */

border-right: 45px solid transparent;

/* Граница справа */

border-top: 25px solid #3e92cc;

/* Граница снизу */

}

.hexagon:hover {

transform: scale(2);

/* Увеличение в два раза*/

transform: rotate(-1440deg);

/* 4 оборота против часовой стрлки -360 * 4 = -1440*/

-webkit-transform: rotate(1440deg);

/* 4 оборота по часовой стрлке 360 * 4 = 1440*/

}

Листинг 3. CSS-код