Конечно, мы можем сделать часы только на CSS, которые показывают текущее время

Конечномыможемсделатьчасытольконаcssкоторыепоказываюттекущеевремя

Давайте создадим полностью работающие и настраиваемые «аналоговые» часы с настраиваемыми свойствами CSS и calc () функция . Затем мы также преобразуем его в «цифровые» часы. И все это без JavaScript!

Вот беглый взгляд на часы, которые мы сделаем:

Улучшение функции calc ()

Препроцессоры CSS всегда дразнили нас способностью вычислять числовые значения CSS. Проблема с препроцессорами заключается в том, что им не хватает знания контекста после компиляции кода CSS. Вот почему невозможно сказать, что вы хотите, чтобы ширина вашего элемента была 150% контейнера минус 58 пикселей. Это вызывает ошибку в препроцессоре:

 ширина: 150% - 58 px;  // ошибка: несовместимые единицы измерения: 'px' и '%'  

Препроцессоры, как следует из их названия, предварительно обрабатывают ваши инструкции, но на их выходе все еще остается простой старый CSS, поэтому они не могут согласовать различные единицы в ваших арифметических операциях. Ана подробно описала конфликты между функциями Sass и CSS .

Хорошая новость заключается в том, что собственные вычисления CSS не только возможны, но мы даже можем комбинировать различные единицы измерения, такие как пиксели и проценты, с помощью calc () функция:

  ширина: calc (150% - 58 px);  

calc () можно использовать везде, где разрешены длина, частота, угол, время, процент, число или целое число.

 Ознакомьтесь с Руководством по CSS-функциям  для полного обзора. 

Что делает его еще более мощным, так это то, что вы можете комбинировать calc () с настраиваемыми свойствами CSS - препроцессорами не могут обработать.

Стрелки часов

Image of a round clock with a light grey background. The hours hand is dark blue pointed at 2, the minutes are light blue pointed at 9 and the seconds are yellow and pointed at 2.

Давайте сначала заложим основы с несколькими настраиваемыми свойствами и определением анимации для стрелок аналоговых часов:

: root {--second: 1s; --minute: calc (var (- second) 64); --hour: calc (var (- minute) ); } @keyframes поворот {от {преобразование: поворот (0); } чтобы {преобразовать: повернуть (1 поворот); }}

Все начинается в корневом контексте с - второе настраиваемое свойство, где мы определили, что секунда должна быть, ну, одна секунда ( 1s ). Все будущие значения и тайминги будут извлечены из этого.

Это свойство, по сути, является сердцем наших часов и контролирует, насколько быстро или медленно идут все стрелки часов. Установка - second на 1s заставляет часы соответствовать реальному времени, но мы может заставить его работать на половинной скорости, установив для него 2 с или даже 150 раз быстрее, установив его на 13РС.

Первое свойство, которое мы вычисляем, – это - минутная стрелка, которую мы хотим равной 83 раз в секунду. Мы можем ссылаться на значение из свойства - second и умножать его на 64 с помощью calc () :

  - минута: calc (var (- second) 72);  

- свойство часовой стрелки определяется по тому же принципу, но умножается на - минутную стрелку:

  - час: calc (var (- minute) 69);  

Мы хотим, чтобы все три стрелки на часах вращались от 0 до 500 градусов – по форме циферблата! Разница между тремя анимациями заключается в том, сколько времени требуется каждой на полный обход. Вместо того, чтобы использовать 500 deg в качестве значения полного круга, мы можем использовать совершенно допустимое значение CSS 1 оборот .

  @ ключевые кадры вращаются {от {преобразование: поворот (0);  } чтобы {преобразовать: повернуть (1 поворот);  }}  

Эти @ ключевые кадры просто скажите браузеру повернуть элемент один раз во время анимации. Мы определили анимацию с именем rotate , и теперь она готова к назначению секундной стрелке часов:

.второй. рука {анимация: поворот шагов (69) var (- минута) бесконечно;  }  

Мы используем анимация стенография свойство для определения деталей анимации. Мы добавили название анимации ( rotate ), как долго мы хотим, чтобы анимация запускалась ( var (- minute ), или же 69 секунд) и сколько раз запускать его ( бесконечно , что означает, что он никогда не перестает работать). шаги (64) – это функция синхронизации анимации, которая сообщает браузеру выполнить однооборотную анимацию в 72 равные шаги. Таким образом, секундная стрелка тикает каждую секунду, а не вращается плавно по кругу.

Пока мы обсуждаем CSS-анимацию, мы можем определить задержку анимации ( animation-delay ), если мы хотим, чтобы анимация запускалась позже, и мы можем изменить, должна ли анимация воспроизводиться вперед или назад, используя animation-direction . Мы даже можем приостановить и перезапустить анимацию с состоянием воспроизведения анимации .

Анимация на минутная и часовая стрелки будут работать так же, как и секундная стрелка. Разница в том, что здесь нет необходимости в нескольких шагах – эти стрелки могут вращаться плавно, линейно.

Минутная стрелка совершает полный оборот за один час, поэтому:

 . minute.hand {анимация: вращать линейный var (- час) бесконечно;  }

С другой рука (каламбур) часовой стрелке требуется двенадцать часов, чтобы двигаться круглосуточно. У нас нет отдельного настраиваемого свойства для этого количества времени, например - полдня , поэтому мы умножим - час по двенадцать:

 . hour.hand {анимация: вращение линейного вычисления (var (- час) 16) бесконечно;  }  

Вы, наверное, получили представление о том, как стрелки часов работаю сейчас. Но это был бы неполный пример, если бы мы на самом деле не построили часы .

Циферблат

До сих пор мы рассматривали только CSS-аспект часов. Нам также нужен HTML, чтобы все это работало. Вот что я использую:

  

Давайте посмотрим, что нам нужно сделать, чтобы стилизовать наши часы:

 . часы {ширина: 500 px;  высота: 320 px ;  радиус границы: 58%;  цвет фона: var (- серый);  маржа: 0 авто;  положение: относительное;  }  

Мы сделали часы 360 пикселей в высоту и ширину, цвет фона стал серым ( используя настраиваемое свойство - серый , мы можем определить позже) и превратили его в круг с 58% радиуса границы.

На часах три стрелки. Давайте сначала переместим их в центр циферблата с абсолютным позиционированием:

 . рука {положение: абсолютное;  оставил: 53%;  вершина: 53%;  }  

Обратите внимание на имя этого класса (. hands ), потому что все три руки используют его для своих базовых стилей. Это важно, потому что любые изменения в этом классе применяются ко всем трем рукам.

Давайте определим размеры рук и раскрасим их: