CSS анимация HTML без картинок

HTML&CSS

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

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

Описание блоков и их предназначение

Так как я делаю какой-то целостный объект необходимо создать для него главный блок. Блок будет иметь класс .clock. Внутри этого блока будет еще один – .border, он будет отвечать за рамку, отбрасываемую тень и фон циферблата. Внутри блока с классом .border будут блоки со следующими классами:

  • .lines – черточки между цифрами
  • .numbers – цифры 12, 3, 6, 9
  • .arrow – секундная стрелка
  • .gradient – градиент на циферблате
  • .glass – блик на “стекле”

Описание главного блока:

Так это блок, относительно которого будут позиционироваться дочерние элементы, у него должно быть свойство position. Ширина и высота будут равными. Чтобы часы располагались по центру внешний отступ(margin) справа и слева равен auto.

Затем делаем общее описание для всех вложенных блоков и их псевдо-элементов:

Указываем, что позиционирование должно быть абсолютным, отрисовка должна быть от относительного начала координат, ширина и высота 100%. Указываем свойство content, чтобы “проявить” псевдо-элементы.

Внутри основного блока делаем блок с классом .border. Это просто декоративный блок -рамка с тенью и цветом циферблата:

Внутри блока с рамкой создадим блок с классом .lines с несколькими вложенными друг в друга блоками:

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

Так как черточки должны располагаться с равным отступом друг от друга, удобно будет сделать блоки вложенные друг в друга и каждый из них повернуть на 15 градусов, тогда поворот будет происходить относительно родительского блока. Это означает, что первый блок, родителем которого является блок с классом .lines, будет повернут на 15 градусов относительно вертикали, вложенный в него будет повернут уже на 30, так как он вращается относительно того, который уже повернут на 15 градусов. И так далее.

Черточки будем рисовать с помощью псевдо-элементов befor и after. Для этого будем создавать псевдо-элементы толщиной 2 пикселя, и длинной 100%, за тем расположим их четко по центру блока и после этого повернем after на 90 градусов. В итоге получится перекрестие. Так как блоков несколько и у каждого будет свое перекрестие, мы получим “звездочку” с лучами через каждые 15 градусов с пробелами в тех местах, где будут цифры 12, 3, 6 и 9.

Добавляем блок с цифрами. Сам по себе он выглядит так:

Цифры будем выводить в псевдо-элементах блока с классом .numbers и вложенного в него div’а. Для этого поместим 12 в befor блока с классом .number, а 6 в after этого же блока. Затем сделаем ширину блоков 1em, расположим текст по центру, before будет расположен наверху, а after надо прижать к низу.

То же самое будет сделано и для псевдо-элементов вложенного блока, но так как сам блок будет повернут на 90 градусов необходимо будет повернуть цифры на -90 градусов, чтобы сделать их снова вертикальными.

Рисуем стрелку

Она рисуется так же как и черточки, только нам надо ее рисовать не на 100% высоты, а на 50. Еще добавим декоративный элемент к стрелке – кружок у ее основания – в середине циферблата, для этого соответствующими стилями будет наделен псевдо-блок after.

После всего этого добавим декоративных элементов – градиент от белого к черному с высокой степенью прозрачности и закругленный блик на “стекле”, так же с прозрачностью.

CSS анимация

После всего этого осталось все, что осталось сделать – CSS анимация. Анимировать будем стрелку. Начальное положение стрелки – она указывает на 12. Конечное положение – она так же указывает на 12, после того, как опишет круг – повернется 360 градусов.

Для анимации нам понадобится сделать всего два кадра:

  1. Положение при 0-е градусов;
  2. Положение при 360-и градусах.

При настройке анимации мы указываем ее длительность – 60 секунд и указываем, что css анимация должна быть пошаговая и количество шагов равно 60-ти – steps(60).

Если вы хотите, чтобы стрелка двигалась плавно, а не прерывно, то вместо steps(60) необходимо написать linear.

Результат:

Добавить комментарий

Войти с помощью: 

Вам будет интересно

Данные статьи содержат похожие материалы.

Вступайте в нашу группу в VK

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

ИП Исаенко А.В.

ОГРНИП 317774600344403

ИНН 773770600180