简洁的css3计时器实例

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

使用声明

1. 本站所有素材（未指定商用），仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后，只拥有使用权，著作权归原作者及17素材网所有。
3. 原创商用和VIP素材，未经合法授权，请勿用于商业用途，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途，织梦系统商业用途请预先授权。

查看演示下载资源

563 13632 26