css电子表数字,使用css实现电子数字效果
在生活中我们看到电子表的显示方式
现在我们就实现这样的效果,核心就是每个数字构建后再合并,话不多说上代码
html结构
css结构
/* The Digits */
.light{
width: 200px;
background: #f4f5f7;
height: 60px;
text-align: center;
}
.digits div{
text-align:left;
position:relative;
width: 28px;
height:50px;
display:inline-block;
margin:0 4px;
}
.light .digits div span {
background-color: #272e38;
border-color: #272e38;
}
.digits div span{
opacity:0;
position:absolute;
-webkit-transition:0.25s;
-moz-transition:0.25s;
transition:0.25s;
}
.digits div span:before,
.digits div span:after{
content:'';
position:absolute;
width:0;
height:0;
border:5px solid transparent;
}
.digits .d1{height:5px;width:16px;top:0;left:6px;}
.digits .d1:before{border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;}
.digits .d1:after{border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;}
.digits .d2{height:5px;width:16px;top:24px;left:6px;}
.digits .d2:before{border-width:3px 4px 2px;border-right-color:inherit;left:-8px;}
.digits .d2:after{border-width:3px 4px 2px;border-left-color:inherit;right:-8px;}
.digits .d3{height:5px;width:16px;top:48px;left:6px;}
.digits .d3:before{border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;}
.digits .d3:after{border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;}
.digits .d4{width:5px;height:14px;top:7px;left:0;}
.digits .d4:before{border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
.digits .d4:after{border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}
.digits .d5{width:5px;height:14px;top:7px;right:0;}
.digits .d5:before{border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
.digits .d5:after{border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}
.digits .d6{width:5px;height:14px;top:32px;left:0;}
.digits .d6:before{border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
.digits .d6:after{border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}
.digits .d7{width:5px;height:14px;top:32px;right:0;}
.digits .d7:before{border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
.digits .d7:after{border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}
/* 1 */
.digits div.one .d5,
.digits div.one .d7{
opacity:1;
}
/* 2 */
.digits div.two .d1,
.digits div.two .d5,
.digits div.two .d2,
.digits div.two .d6,
.digits div.two .d3{
opacity:1;
}
/* 3 */
.digits div.three .d1,
.digits div.three .d5,
.digits div.three .d2,
.digits div.three .d7,
.digits div.three .d3{
opacity:1;
}
/* 4 */
.digits div.four .d5,
.digits div.four .d2,
.digits div.four .d4,
.digits div.four .d7{
opacity:1;
}
/* 5 */
.digits div.five .d1,
.digits div.five .d2,
.digits div.five .d4,
.digits div.five .d3,
.digits div.five .d7{
opacity:1;
}
/* 6 */
.digits div.six .d1,
.digits div.six .d2,
.digits div.six .d4,
.digits div.six .d3,
.digits div.six .d6,
.digits div.six .d7{
opacity:1;
}
/* 7 */
.digits div.seven .d1,
.digits div.seven .d5,
.digits div.seven .d7{
opacity:1;
}
/* 8 */
.digits div.eight .d1,
.digits div.eight .d2,
.digits div.eight .d3,
.digits div.eight .d4,
.digits div.eight .d5,
.digits div.eight .d6,
.digits div.eight .d7{
opacity:1;
}
/* 9 */
.digits div.nine .d1,
.digits div.nine .d2,
.digits div.nine .d3,
.digits div.nine .d4,
.digits div.nine .d5,
.digits div.nine .d7{
opacity:1;
}
/* 0 */
.digits div.zero .d1,
.digits div.zero .d3,
.digits div.zero .d4,
.digits div.zero .d5,
.digits div.zero .d6,
.digits div.zero .d7{
opacity:1;
}
/* dot */
.digits div.dot{
width: 5px;
}
.dot:after{
width: 5px;
height: 5px;
content: '';
position: absolute;
left: 0;
bottom: 0px;
background-color: #272e38;
}
js结构动态构建
functionclocknum(num) {
$('.digits').empty();var html = '';var strarr = num.toString().split('');var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');for(var i=0; i
html+= '
html+= '
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'
';
}
}
$('.digits').append(html);
}
clocknum(0.56); //执行
效果图
css电子表数字,使用css实现电子数字效果相关推荐
- css实现电子数字字体
css实现电子数字字体 转载 css 页面机械/数字电子 字体怎么实现? 本文链接:https://blog.csdn.net/m0_45305745/article/details/12494977 ...
- CSS立体文字和电子数字样式数字大屏数字
立体数字: CSS:text-shadow: 6px 3px 0px rgb(0 225 21 / 36%) 电子数字: CSS: font-family: 'electronicFont'; CSS ...
- php$后面加点有什么用,css和js后加问号和数字有什么用
作用:强制浏览器调用新地址,防止缓存.在css和js后加问号和随机数字,不会影响文件的调用:但是,如果改变了数字,浏览器就会当成一个新文件读取,而不会读取以前的缓存文件. css和js后加问号和数字的 ...
- jQuery+CSS五类验证码(字母、数字、滑动、点击)
用到了js插件 <!DOCTYPE html> <html><head><meta charset="utf-8" /><li ...
- css 空格数字 宽度,CSS代码书写规范究极指南
1.格式化代码 1.1文件[建议]:CSS文件使用无BOM的UTF-8编码 1.2缩进[强制]:使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符. CSS Code复制内容到 ...
- 网易互娱2017实习生招聘在线笔试第一场-1电子数字
http://hihocoder.com/contest/ntest2016spring1/problem/1 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 电子数 ...
- 网易互娱2017在线笔试——题目一:电子数字
电子数字 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 电子数字在生活中很常见,而许多的电子数字是由LED数码管制作而成.数字LED数码管一般由7个发光二极管封装在一起 ...
- C# 自制OCR获取图片中的电子数字
C# 自制OCR获取图片中的电子数字 0.前言 1.项目背景 1.思路分析 1.1 找对应电子数字字体 1.2 数字字体分析 1.2.1 将数字[8]截图 1.2.2 根据数字[8]截图像素标识辨识点 ...
- h5 canvas绘制电子数字时钟
使用h5的canvas实现绘制电子数字时钟,只支持数字,效果如下: <!DOCTYPE html> <html lang="en"> <head> ...
- 数字货币支付和电子支付一样吗?
数字货币支付和电子支付一样吗?相信大多数人都知道数字货币和电子支付说的不是一回事儿,但其实还是会有人把两者搞混.看完下面这篇文章,你就明白二者的区别到底在哪里了. 相信大家应该还记得,大约是在两年前, ...
最新文章
- BZOJ 1096: [ZJOI2007]仓库建设
- oracle 隐藏视图定义,【学习笔记】show hidden parameter 创建查看隐藏参数视图
- 编程之美-俄罗斯方块游戏方法整理
- 将 Web 项目从 Visual Studio .Net 2002/2003 转换到 Visual Studio 2005 的分步指南
- java中exec命令,使用Java中的Runtime.exec()執行Windows命令
- mysql 优化300例_PHP+MySQL实现对一段时间内每天数据统计优化操作实例
- 学长毕业日记 :本科毕业论文写成博士论文的神操作20170404
- Matrix Completion with Noise
- 调用DM FLDR JNI导出数据库文件
- 12-1-顺序文件归并-文件-第12章-《数据结构》课本源码-严蔚敏吴伟民版
- fedora 15怎么修改运行级别?
- android wear评测,android wear5.1怎么样 android wear5.1更新评测
- poj 3009 Curling 2.0 (dfs的应用)
- 想找一些设计素材不知道去哪里找?
- 投影参数_色彩极致3-怎么调校投影机的参数
- SpringBoot学习笔记(3)----SpringBoot的profile多环境配置
- RedHat6使用centos6的yum源
- 各类木材强度_常用木材分类
- 基于toolbox_calib工具箱的相机标定matlab仿真
- iOS应用审核 - Phased Release for Automatic Updates (阶段性自动更新发布)
热门文章
- 红外接收头图片_常见红外接收头、遥控接收头图片、引脚定义
- ESAPI入门使用方法
- esApi基本概念和操作
- HTML5+CSS网页设计概述
- 总结:Postman测试、IP:POST测试、Postman转换到python测试(Linux下的docker应用部署web容器并存储数据到mysql,调用API)
- Windows如何ping端口
- ADMEMS 软件设计架构方法
- ts无损剪辑合并_视频如何合并?视频合并太难?其实很简单
- 学会这个前端特效520还怕没CP伴侣
- 腾达u12如何安装linux驱动,Centos7 安装腾达U12驱动无线网卡