久久资源网

简洁的css3计时器实例

简洁的css3计时器实例

2021-02-23 01:24:33 CSS3实例 admin

售价:会员免费 收藏

特别声明:资源售价只是赞助,不代表代码或者素材本身点数。收取费用仅维持本站的日常运营所需!

简洁的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>

发表评论

用户头像 游客
此处应有掌声~

评论列表

还没有评论,快来说点什么吧~