Skip to content

Секундомер на CSS

Рад снова приветствовать вас! Сегодня мы с вами создадим секундомер на CSS. Наш секундомер будет основан на CSS3 анимации, наряду с использованием свойства animation-play-state для запуска, остановки и сброса показаний секундомера.

HTML

Подготовим разметку для секундомера:

<div class="container">
<!-- управление секундомером -->
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />

<div class="timer">
<!-- часы -->
<div class="cell">
<div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>

<!-- минуты -->
<div class="cell">
<div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>

<!-- секунды -->
<div class="cell">
<div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
<div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>

<!-- доли секунд -->
<div class="cell">
<div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
<div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>

<!-- кнопки для управления секундомером -->
<div id="timer_controls">
<label for="start">Start</label>
<label for="stop">Stop</label>
<label for="reset">Reset</label>
</div>
</div>

Это простой div, содержащий в себе числа, которые мы в свою очередь заставим меняться посредством CSS-анимации.

CSS

Мы будем использовать скрипт prefixfree, чтобы CSS оставался коротким и легким (избавимся от префиксов браузеров). В самом секундомере JS использоваться не будет. Вы также можете указать все необходимые префиксы и не использовать данный скрипт.

<!-- Подключаем prefixfree -->
<script src="prefixfree.min.js" type="text/javascript"></script>

Основный стили

Для таймера мы добавим бордюр в 7 пикселей, тень и фоновый градиент:

.timer {
padding: 10px;
background: linear-gradient(top, #222, #444);
background: -webkit-linear-gradient(top, #222, #444);
overflow: hidden;
display: inline-block;
border: 7px solid #efefef;
border-radius: 5px;
position: relative;
box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1);
}

Стили для контейнера с цифрами и для самих цифр. Должна отображаться только 1 цифра, поэтому высота и ширина контейнера с цифрами равны ширине и высоте самого блока цифр соответственно:

.cell {
width: 0.60em;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}

.numbers {
width: 0.6em;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #fff;

position: absolute;
top: 0;
left: 0;

/*Glow to the text*/
text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}

Кнопки управления. Показываем только лейблы к радио-кнопкам, а сами радио-кнопки скроем из виду:

#timer_controls {
margin-top: -5px;
}
#timer_controls label {
cursor: pointer;
padding: 5px 10px;
background: #efefef;
font-family: arial, verdana, tahoma;
font-size: 11px;
border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}

Код управления

Начнем со взаимодействия клика по кнопкам управления:

#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}

Теперь переходим к анимациям. Мы уже задали контейнерам чисел классы .moveten и .movesix, соответствующие количеству цифр в нем. Добавим им анимации, которые скоро создадим:

.moveten {
animation: moveten 1s steps(10, end) infinite;
/*по-умолчанию анимация остановлена*/
animation-play-state: paused;
}
.movesix {
animation: movesix 1s steps(6, end) infinite;
animation-play-state: paused;
}

Теперь нам надо синхронизировать скорость анимации так, чтобы на смену одной цифры приходилась одна секунда:

.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;}

.milisecond {animation-duration: 1s;}
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}

.minute {animation-duration: 600s;}
.tenminute {animation-duration: 3600s;}

.hour {animation-duration: 36000s;}
.tenhour {animation-duration: 360000s;}

Давайте анимировать цифры — это основная часть данного урока. Смысл анимации заключается в изменении «верхнего» (видимого) значения .number. Минуты и секунды должно быть ограничены в значениях до ’60’, а не до ‘100’. Следовательно, необходимо создать две анимации. Одна из 10 шагов и 10 цифр, а другая — 6 шагов и 6 цифр.

@keyframes moveten {
0% {top: 0;}
100% {top: -400px;}
/*высота = 40, высота = 10, отсюда -400 для прокрутки элемента вверх*/
}

@keyframes movesix {
0% {top: 0;}
100% {top: -240px;}
/*высота = 40, высота = 6, отсюда -240 для прокрутки элемента вверх*/
}

Заключение

Ну вот и готов наш секундомер! Надеюсь, что вы найдете применение данной технике, если вам понадобится создать таймер или что-нибудь в этом духе!