简洁的css3计时器实例

简洁的css3计时器实例

收藏
简洁的css3计时器实例
分享一款纯 css3 实现的计时器,无任何 JS 代码。使用 CSS3 选择器结合 checkbox 是否选中,配合 CSS3 动画进行「位移」变更数字,达到动态计时的效果。支持重置,开始,暂停时分秒计时器代码。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 I想要
  • 上传时间 6年前

使用方法:

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. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。