纯 css 计时器
时间:2019-04-19
本文章向大家介绍纯 css 计时器,主要包括纯 css 计时器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>纯CSS计时器演示_dowebok</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="dowebok"> <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> </body> </html>
css
html, body { height: 100%; overflow: hidden; } body { background: #121212; font: 400 100% "Roboto", sans-serif; } *, *:before, *:after { box-sizing: border-box; } .dowebok { width: 320px; height: 260px; position: absolute; top: 50%; left: 50%; margin: -130px 0 0 -160px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .timer { display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 0 0 4em; color: #fff; } .time-card { margin: 0 1em; text-align: center; } .time-card-count { width: 70px; height: 77px; line-height: 77px; overflow: hidden; } .time-card-count:after { display: block; font-size: 4em; } .time-card-label { font-size: 0.625em; text-transform: uppercase; opacity: 0.7; } .colon { font-size: 2em; } .actions .btn { margin: 0 8px; vertical-align: middle; } .btn { min-width: 100px; padding: 8px 24px; display: inline-block; border: solid 1px transparent; font-size: 14px; letter-spacing: 0.05em; text-align: center; background: none; transition: background 0.25s ease-out; cursor: pointer; white-space: nowrap; } .btn:focus { outline: none; } .btn-success, [id="stop"]:checked~.actions [for="stop"] { border-color: #28A745; color: #28A745; } .btn-success:hover, [id="stop"]:checked~.actions [for="stop"]:hover { background: rgba(40, 167, 69, 0.12); } .btn-danger { border-color: #DC3545; color: #DC3545; } .btn-danger:hover { background: rgba(220, 53, 69, 0.12); } .btn-info, [id="start"]:checked~.actions [for="start"] { border-color: #17a2b8; color: #17a2b8; } .btn-info:hover, [id="start"]:checked~.actions [for="start"]:hover { background: rgba(23, 162, 184, 0.12); } .btn[disabled], [id="start"]:not(:checked)+[id="stop"]:checked~.actions [for="start"] { color: #fff; border-color: #fff; opacity: 0.5; cursor: not-allowed; } [data-max="24"] .time-card-count:after { content: '00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23'; } [data-max="60"] .time-card-count:after { content: '00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59'; } [id="start"]:checked~.timer [data-type="hours"] .time-card-count:after { -webkit-animation: counter 86400s infinite steps(24) forwards; animation: counter 86400s infinite steps(24) forwards; } [id="start"]:checked~.timer [data-type="minutes"] .time-card-count:after { -webkit-animation: counter 3600s infinite steps(60) forwards; animation: counter 3600s infinite steps(60) forwards; } [id="start"]:checked~.timer [data-type="seconds"] .time-card-count:after { -webkit-animation: counter 60s infinite steps(60) forwards; animation: counter 60s infinite steps(60) forwards; } [id="start"]:checked+[id="stop"]:not(:checked)~.actions [for="start"] { display: none; } [id="start"]:checked~.actions [for="start"] { font-size: 0; } [id="start"]:checked~.actions [for="start"]:after { content: '重置'; font-size: 14px; letter-spacing: 0.05em; } [id="start"]:checked~.actions [for="stop"] { display: inline-block; } [id="start"]:checked+[id="stop"]:checked~.actions [for="reset"] { display: none; } [for="stop"] { display: none; } [id="start"]:checked+[id="stop"]:checked~.timer .time-card-count:after { -webkit-animation-play-state: paused !important; animation-play-state: paused !important; } [id="stop"]:checked~.actions [for="stop"] { font-size: 0; } [id="stop"]:checked~.actions [for="stop"]:after { content: '继续'; font-size: 14px; letter-spacing: 0.05em; } [id="start"]:not(:checked)+[id="stop"]:checked~.regenerate { display: block; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff; cursor: pointer; font-size: 10px; } [id="start"]:not(:checked)+[id="stop"]:checked~.regenerate:hover { text-decoration: underline; } @-webkit-keyframes counter { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes counter { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } }
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 实践 | Kubernetes守护进程集之DaemonSet
- MySQL8.0带来的两点便利
- python写归并排序
- Go 使用标准库 sql 包和三方数据库驱动包操作 MySQL
- Defi?Uniswap 项目漏洞教程新骗局
- Weblogic12c T3 协议安全漫谈
- 联盟链智能合约安全浅析
- MySQL复杂where条件分析
- 超链接标签
- 【剑指Offer】二叉树的镜像
- 【redis6.0.6】redis源码慢慢学,慢慢看 -- 第四天:提纲掣领main函数(server)
- redis学习(六)
- 原生JS实现一个Ajax跨域请求
- 深入理解类加载机制:拨开迷雾见真章
- 修复postgres安装错误 Problem running post-install step. Installation may not complete correctly The datab