分享一款纯 css3 实现的计时器，无任何 JS 代码。使用 CSS3 选择器结合 checkbox 是否选中，配合 CSS3 动画进行「位移」变更数字，达到动态计时的效果。支持重置，开始，暂停时分秒计时器代码。

使用方法

1、head引入css文件

<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/style.css">

2、body引入HTML代码

<div class="mainbox">
	<input type="checkbox" id="start" hidden>
	<input type="checkbox" id="stop" hidden>
	<input type="checkbox" id="reset" hidden>
	<div class="timer">
		<div class="time-card" data-type="hours" data-max="24">
			<div class="time-card-count"></div>
			<div class="time-card-label">时</div>
		</div>
		<span class="colon">:</span>
		<div class="time-card" data-type="minutes" data-max="60">
			<div class="time-card-count"></div>
			<div class="time-card-label">分</div>
		</div>
		<span class="colon">:</span>
		<div class="time-card" data-type="seconds" data-max="60">
			<div class="time-card-count"></div>
			<div class="time-card-label">秒</div>
		</div>
	</div>
	<div class="actions">
		<label class="btn" disabled for="reset">重置</label>
		<label class="btn btn-success" for="start">开始</label>
		<label class="btn btn-danger" for="stop">暂停</label>
	</div>
	<label for="stop" class="regenerate">已重置</label>
</div>

资源出处：https://www.moyublog.com/codes/9388.html