Автор статьи
Валерия
Эксперт по сдаче вступительных испытаний в ВУЗах
Этапы отрисовки любой страницы:
-
- ⚹ подготовка к запросу на сервер;
- ⚹ запрос данных с сервера;
- ⚹ шаблонизация;
- ⚹ обновление DOM;
- – «Ок, теперь у нас есть метрики, мы можем отправить их на сервер», – говорим мы.
- – «Что же дальше?» – вопрошаете вы
- – «А давай построим график!» – отвечаем мы.
- – «А что будем считать?» – уточняете вы.
Лабораторная работа №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-код
Вывод В рамках рассмотренной лабораторной работы были получены навыки разработки анимированных элементов веб-страниц. Нами был разработана веб-страница, содержащая код для отображения геометрической фигуры — шестиугольника. Данная фигура приводилась в вращение при наведении на нее курсором при помощи псевдокласса .hover и свойства transform, при помощи которого можно задать, как и увеличение изображения, так и угол оборота какого-либо HTML-элемента. Этот способ является наиболее подходящим, так как в постановке задание говорилось о том, что элемент должен двигаться при наведении на него курсором, что реализуется при помощи .hover. Этот способ является наиболее простым и общепринятым для решения задач такого рода.
О сайте
Ссылка на первоисточник:
http://vgapkro.ru
Поделитесь в соцсетях: