分享一款纯 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>
