Проектирование и дизайн ИС Практическая работа №18

Шаг 2

В HTML-файле создайте блок-контейнер с помощью тега который используется для группировки блочных элементов и придания им стилей и элемента class который определяет имя класса для элемента зададим класс (он у нас будет основным) в который поместим еще 3 блок-контейнера . 2 блог-контейнер , 3 блог-контейнер , 4 блог-контейнер .Обратите внимание на то, что блок div class="clock-minutes" будет пустым!

Далее в блок-контейнер «clock-inner»мы поместим маркированный список который будет у нас содержать римские числа «XII, III, VI, IX» для

наших будущих часов.

Но к нашему списку должен быть подключен класс «clock-numbers».

Синтаксис начала списка будет следующим:

Далее в основной блок-контейнер «container» мы также разместим заголовок третьего уровня с текстом «Анимированные часы»

В итоге при открытии HTML в браузере у вас должен быть следующий результат:

Итак, с HTML-файлом мы закончили, теперь давайте перейдем к CSS.

Шаг 3 Создание фона

Теперь перейдем к нашему СSS-файлу. Для начала мы внесем некие подготовительные настройки для нашего будущего проекта. В CSS для тега BODY мы уберем все отступы от каждого края элемента, установим цвет шрифта, также мы установим в качестве фона радиальный градиент и установим размер нашего градиента.

В итоге у нас должен получиться вот такой фон:

Давайте запишем наш скрипт для фона:

После добавления фона вы можете наблюдать такой результат:

Шаг 4 Расположение нашей анимации

Теперь давайте расположим наши будущие часы в нужном месте. Для этого мы создадим селектор классов .container в котором мы укажем размеры наших будущих часов (размер наших часов будет составлять 200 на 200 пикселей), позиционирование которое позволит определить то, как будет позиционироваться элемент на нашей странице и первоначальное расположение. Для этого мы введем следующий код:

Данный код расположит наши будущие часы по центру экрана и задаст будущие размеры часов

Шаг 5 Создание формы часов

Следующим шагом мы создадим корпус часов, где в будущим будут располагаться наши римские цифры и секундная стрелка.

Чтобы создать корпус наших часов мы воспользуемся хитростью, мы селектор классов .clock в него мы поместим фон его мы закрасим в серый цвет

Далее нам нужно будет сгладить углы нашей будущего корпуса.

Чтобы наш корпус смотрелся объемным мы добавим ему тень которую немного сдвинем.

На последнем этапе мы зададим размеры нашего корпуса и позиционирование.

Шаг 6 Создание циферблата

Дальше нам нужно создать циферблат в который мы поместим наши цифры и секундную стрелку.

Мы создадим селектор классов .clock-inner который будет содержать: фон нашего циферблата, свойство скругления углов, размеры нашего циферблата, позиционирование и свойство расположения. Также чтобы сделать наш циферблат более объемным, внутрь циферблата мы поместим небольшую тень, для лучшего эффекта.

Шаг 7 Редактирование цифр

Теперь давайте займемся нашими цифрами. Для начала нам нужно их подготовить. Создадим селектор .clock-numbers и поместим в него следующие функции: с помощью padding-left мы создадим внутренний отступ, чтобы наши цифры не куда не смещались, также мы зададим расстояние как будут располагаться наши цифры и с помощью позиционирования и свойств направления мы сдвинем их из рамки в циферблат.

Шаг 8 Оформление цифр

Следующим шагом мы поработаем с оформлением наших цифр. Для начала мы создадим селектор .clock-numbers li (для нашего списка), дальше мы добавим отступы нашим цифрам, также изменим шрифт цифр, чтобы он смотрелся не так скучно, помимо этого мы изменим цвет, чтобы цифры выделялись на фоне циферблата и с помощью позиционирования мы зададим им начальное расположение.

Шаг 9 Расположение цифр

Теперь после того как мы закончили с редактированием оформлением наших цифр, давайте мы поместим каждую цифру на нужное место. Для этого для каждой цифры нам нужно будет создать свой селектор с именем .clock-numbers для тега li с функцией nth-child(1). Цифра «1» в функции nth-child нужна в виде порядкового номера ,чтобы редактор понимал для какой цифры вы применяете функцию, а так как у нас будет четыре цифры, следовательно у нас будет четыре селектора.

Ниже код помещает цифру «XII» на свое место.

Аналогично разместите остальные цифры по своим местам, задав им свое расположение.

У вас должен получиться такой результат.

Шаг 10 Создание секундной стрелки

Следующим шагом мы создадим секундную стрелку, для этого мы создадим селектор .clock-minutes в который поместим следующий код:

Этот код создаст стрелку из фона высотой в 60 пикселей и шириной в 2 пикселя, далее ее углы мы скруглим и разместим нашу стрелку по центру.

Посмотрим на результат:

Чтобы стрелка была более правдоподобнее мы нее немного дополним, добавив дополнительные элементы

Результат будет следующим:

Шаг 11 Запуск анимации

С дизайном часов мы закончили, теперь давайте запустим их!

Но для начала мы должны прописать настройки для анимации и создать правила по которым наша анимация будет работать. Начнем с первого.

В селектор .clock-minutes мы пропишем настройки:

Данные настройки устанавливают на сколько пикселей будет смещаться наша секундная стрелка относительно центра, также мы задаем время и продолжительность сколько будет идти наша анимация.

Ну и в конце мы добавим небольшую тень чтобы наша стрелка казалась боле эффектной при смещении.

Далее отдельно пропишем правило для анимации:

Наши часы пошли! Теперь давайте добавим дополнительный эффект который позволит нам при наведении курсора мыши останавливать секундную стрелку по необходимости.

Остался последний штрих, это оформление нашего заголовка.

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

1. Какие свойства CSS необходимы для вращения стрелок часов?

2. Что такое transform-origin и как он влияет на вращение стрелок часов?