Делаем красивые и легкие часы с помощью CSS3 и jQuery

Предлагаем Вам небольшое руководство по тому, как создать симпатичные «настенные» часы, который можно использовать в любом месте Вашего сайта. Используем CSS3 и jQuery.

Итак, нам понадобится компактная HTML-разметка, немного стилей и пару необходимых строк JS-кода. Приступаем к созданию красивых часов для сайта:

1. Структура HTML

<div class="clock">
  <div class="hour-hand"></div>
  <div class="minute-hand"></div>
  <div class="second-hand"></div>
</div>

Ничего особенного – обертка и три div`а в качестве часовой, минутной и секундной стрелок.

2. Стили CSS

body {
  background-color: #455051;
}

.clock {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 400px;
  width: 400px;
  background-color: #fff;
  border-radius: 50%;
  border: 24px solid #DF554C; 
  background-image:
    radial-gradient(circle at center, #507D9C 8px, transparent 8px),
    radial-gradient(circle at center, white 50%, transparent 50%, transparent 65%, white 65%),
    linear-gradient(to right, transparent 50%, #507D9C 50%, transparent 51%),
    linear-gradient(to bottom, transparent 50%, #507D9C 50%, transparent 51%),
    linear-gradient(-30deg, transparent 50%, #507D9C 50%, transparent 51%),
        linear-gradient(30deg, transparent 50%, #507D9C 50%, transparent 51%),
     linear-gradient(60deg, transparent 50%, #507D9C 50%, transparent 51%),
    linear-gradient(-60deg, transparent 50%, #507D9C 50%, transparent 51%);
}

.hour-hand {
  position: absolute;
  height: 80px;
  width: 8px;
  margin: auto;
  top: -20%;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 4px;
  background-color: #507D9C;
  transform-origin: bottom;
  transform: rotate(0deg);
}

.minute-hand {
  position: absolute;
  height: 120px;
  width: 8px;
  margin: auto;
  top: -30%;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 4px;
  background-color: #507D9C;
  transform-origin: bottom;
  transform: rotate(90deg);
}

.second-hand {
  position: absolute;
  height: 120px;
  width: 2px;
  margin: auto;
  top: -30%;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 4px;
  background-color: #507D9C;
  transform-origin: bottom;
  transform: rotate(180deg);
}

Абсолютным позиционированием задаем начальное положение стрелок и рисуем индикаторы с помощью линейных градиентов.

3. Сценарий jQuery

function updateClock(hours, minutes, seconds) {

  var hourDegrees = hours * 30;
  var minuteDegrees = minutes * 6;
  var secondDegrees = seconds * 6;

  $('.hour-hand').css({
    'transform': `rotate(${hourDegrees}deg)`
  });

  $('.minute-hand').css({
    'transform': `rotate(${minuteDegrees}deg)`
  });

  $('.second-hand').css({
    'transform': `rotate(${secondDegrees}deg)`
  });

}

setClockWithCurrentTime();

function setClockWithCurrentTime() {
    var date = new Date();

  var hours = ((date.getHours() + 11) % 12 + 1);
  var minutes = date.getMinutes();
  var seconds = date.getSeconds();

  updateClock(hours, minutes, seconds);
}



setInterval(setClockWithCurrentTime, 1000);

Определяем в скрипте наши стрелочки и применяем к ним свойство transform на заданный промежуток времени. Просто и изящно.

Скачать готовый пример Вы можете по ссылке выше. Удачи!