Часы CSS

12
3
6
9

В предыдущей статье Анимация CSS для начинающих я обещал примеры анимаций.

Начнём с простейшего и сделаем вот такие часы.

Чтобы заставить стрелки двигаться применим свойство animation и правило @keyframes

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

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>hasy</title>
<style>

.hasy {	/* Круг для часов */
  position: relative;
  width: 100px;
  height: 100px;
  margin: 5em;
  border: 4px solid #48d1cc;
  border-radius: 50%;
  }

.minutes { 	/* Минутная стрелка */ 
  position: absolute;	/*Позиционируем относительно .hasy */
  width: 3px;	/* Толщина стрелки */	
  height: 35px;	/* Длина стрелки */	
  left: 51px;	/*Положение стрелки*/	
  top: 16px;	 
  background: #24C0BA;
  animation: now 1600s infinite steps(1600);	/* Скорость и движение стрелки */		
  transform-origin: 0 34px;	/* Точка относительно которой вращается стрелка */	
  }
  
.has {
  position: absolute;
  width: 4px;
  height: 28px;
  left: 50px;
  top: 20px;
  background: #009B95;
  animation: nov 43200s infinite steps(43200);
  transform-origin: 0 29px;
  }
  
.sekundes {
  position: absolute;
  width: 2px;
  height: 45px;
  left: 51px;
  top: 4px;
  background: #48d1cc;
  animation: nev 60s infinite steps(60);
  transform-origin: 0 45px;
 }

@keyframes nev {
  100%{
   transform: rotate(360deg); /* Стрелка делает полный круг */
  }
}

@keyframes nov {
  100%{
   transform: rotate(360deg);
  }
}

@keyframes now {
  100%{
   transform: rotate(360deg);
  }
}

.onen, .threen, .sixn, .ninen { /* Цифры на циферблате */
    position: absolute;
	font-weight: bold;
	font-size: 18px;
	color: #48d1cc;
} 

.onen {
	top: 3px;
	left: 41px;
}

.threen {
	top: 43px;
	left: 85px;
}

.sixn {
	top: 78px;
	left: 43px;
}

.ninen {
	top: 43px;
	left: 5px;
}

.sentr {	/* Центр циферблата */
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	top: 42px;
	left: 44px;
	background: #009B95;
}
</style>
</head>
<body>
  <div class="hasy">
	<div class="onen">12</div>
	<div class="threen">3</div>
	<div class="sixn">6</div>
	<div class="ninen">9</div>
	<div class="sekundes"></div>
	<div class="minutes"></div>
	<div class="has"></div>
	<div class="sentr"></div>
  </div>

</body>
</html>

Вот так получилось на вскидку.

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

Следующие примеры посложнее. Желаю творческих успехов.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *