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

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

Для данного урока я решил сделать анимированный секундомер. При этом я все сделаю с помощью HTML и 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.

Результат:

Посмотрите пример работы или исходный, кликнув на соответствующую кнопку:

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

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

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