html实现led数字效果,css3一个简易的 LED 数字时钟实现方法
这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了。
首先可以很明确的一点,这个真没技术含量存在,只是需要点耐心。
LED 数字包含了左右各两条线,中间三条线,一共 7 条线。所以,为了能够更容易辨识,在写 demo 的时候,我直接这样写了。
至于 digital_0 这个的作用,其实很简单,就是控制从 0 ~ 9 这十个数字的变化而存在的。
.digital_1 .c1,
.digital_1 .c2,
.digital_1 .c3,
.digital_1 .l1,
.digital_1 .l2,
.digital_2 .l1,
.digital_2 .r2,
.digital_3 .l1,
.digital_3 .l2,
.digital_4 .c1,
.digital_4 .c3,
.digital_4 .l2,
.digital_5 .l2,
.digital_5 .r1,
.digital_6 .r1,
.digital_7 .c2,
.digital_7 .c3,
.digital_7 .l1,
.digital_7 .l2,
.digital_9 .l2,
.digital_0 .c2 {
animation: changeDigital 200ms 0ms 1 ease-in forwards;
}
这里使用了一个 animation 动画,并且时间是 200ms,主要是为了让某些部分消失的时候,有一个过渡效果。
@keyframes changeDigital {
form {
opacity: 1;
}
to {
opacity: 0;
}
}
那么剩下来的就是最需要耐心的地方了,调整控制那 7 条线的位置,同时还要考虑每条线是带有斜角的,而且还稍微有点圆弧的感觉。带点圆弧的感觉那么直接使用 border-radius 就可以了,至于那个斜角的话,如果各位知道 CSS 中用边框画三角的方法,那么就应该明白怎么做这个斜角了。
当我们要画三角的时候,width 和 height 都是为 0,然后用过控制 border-width 而得到最终的三角的大小,那么这里如果我们根据线条的位置,适当选择 width 和 height 有具体的值,是不是就有斜角的感觉了呢。
接着,需要注意横着的中间那根线,也就是 .c2 这个元素,线条两边是三角突出的,可以实现的方式也很多,这里我选择使用 :after 和 :before 相叠加。
最后就是对每个元素的位置做调整,控制好大小位置就可以了,因为是使用定位的方式来操作,所以,调整起来还是很简单的。
.digital span {
position: absolute;
border-radius: 50vh;
box-sizing: border-box;
}
.digital .c1,
.digital .c2,
.digital .c3 {
height: 0;
width: 26px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
.digital .c1 {
top: 0;
left: 0;
border-top: 4px solid currentColor;
}
.digital .c2 {
top: 50%;
left: 0;
margin-top: -2px;
}
.digital .c2:before,
.digital .c2:after {
content: "";
height: 0;
width: 24px;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
box-sizing: border-box;
}
.digital .c2:before {
position: absolute;
top: 0;
left: -3px;
border-bottom: 2px solid currentColor;
}
.digital .c2:after {
position: absolute;
top: 2px;
left: -3px;
border-top: 2px solid currentColor;
}
.digital .c3 {
bottom: 0;
left: 0;
border-bottom: 4px solid currentColor;
}
.digital .l1,
.digital .l2 {
height: 21px;
width: 0;
left: 0;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-left: 4px solid currentColor;
}
.digital .l1 {
top: 1px;
border-top-width: 4px;
}
.digital .l2 {
top: 24px;
border-bottom-width: 4px;
}
.digital .r1,
.digital .r2 {
height: 21px;
width: 0;
right: 0;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 4px solid currentColor;
}
.digital .r1 {
top: 1px;
border-top-width: 4px;
}
.digital .r2 {
top: 24px;
border-bottom-width: 4px;
}
做完这些,剩下的就是简单的对外层元素做点优化,比如稍微倾斜一点。
.digital {
position: relative;
width: 26px;
height: 46px;
margin-left: 10px;
transform: skew(-6deg);
}
哦,忘了说了,这里的边框颜色我选择使用 currentColor 的方式,这样可以在暗黑模式切换的过程中,只需要修改 body 中的文字颜色和背景色就可以了。currentColor 会选择文字颜色来使用。
样式处理完之后,接着就是添加点 JS 来显示时钟了,这个没啥好说的,只要把两个数字整出来放到不同的 div 中就好了。这里我取个位数的时候,是用 m%10 的方式取余;取十位数的时候是通过 parseInt(m/10) 的方式取整。取出来之后分别放到想对应的 div 中就 ok 了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html实现led数字效果,css3一个简易的 LED 数字时钟实现方法相关推荐
- 猜数字游戏,输入一个 1-100 以内的数字
具有5次机会猜数字 import random print("猜数字游戏,输入一个 1-100 以内的数字") random_num=random.randint(1,100) f ...
- 喜欢的数字:使用一个字典来_数字证书:何时何地使用它们
喜欢的数字:使用一个字典来 Digital certificates are form of electronic authorizations used to verify the identiti ...
- 猜数字 随机生成一个1-100之间的数字,玩家进行猜测,如果猜错,提示玩家数字过大或者过小,如果猜对恭喜玩家胜利,并且退出游戏。
案例:猜数字 要求:随机生成一个1-100之间的数字,玩家进行猜测,如果猜错,提示玩家数字过大或者过小,如果猜对恭喜玩家胜利,并且退出游戏. **限制随机数的范围 有时程序需要一个特定范围内的随机数. ...
- python输入两个数字的成语_请用 Python 语言编写一个简易的猜数字游戏程序。
import random answer = random.randint(1,10) print('猜数游戏 ') num=input('请输入你猜测的数字 n') guess=int(num) n ...
- html文字简单动画效果,CSS3一个简单的按钮悬停波浪文本动画效果
CSS 语言: CSSSCSS 确定 @import url("https://fonts.googleapis.com/css?family=Roboto:900"); body ...
- html css 圆圈数字,html5 css3带日期的圆形数字电子时钟代码
特效描述:html5 css3 带日期 圆形数字 电子时钟代码.HTML5+CSS3圆形数字电子时钟. 代码结构 1. 引入JS 2. HTML代码 6 5 4 3 2 1 12 11 10 9 8 ...
- 实现一个简易chat聊天室(4种方法)
聊天室 提高服务器性能的方法有 I/O模型 阻塞I/O 非阻塞I/O I/O复用 SIGO信号 异步I/O 池 进程池 线程池 零拷贝读写 高级I/O函数 上下文切换和锁 pthread创建法 sel ...
- 七种计数器总结(格雷码计数器、环形计数器、约翰逊计数器、FLSR、简易时分秒数字秒表|verilog代码|Testbench|仿真结果)
七种计数器总结 一.可复位/置数计数器 1.1 可复位/置数计数器 1.2 Verilog代码 1.3 Testbench 1.4 仿真结果 二.双向(可加可减)计数器 2.1 双向(可加可减)计数器 ...
- C/C++语言:依次取出一个正整数的各位数字,及其变种形式
说明 本文主要介绍"依次取出一个整数的各位数字"及其 变种形式 本来的面貌 PS:废话少说,先贴代码,后面再举两个例子: #include<iostream> #inc ...
最新文章
- ajax请求的步骤,ajax请求的五个步骤
- hdu-1029 Ignatius and the Princess IV
- 形式化方法、《大象:Thinking in UML》
- 【Python基础】Python中必须知道的5对魔术方法
- SQL 学习与工作日常:语句积累
- Linux中的组合键
- 动态规划入门 合并石子 COGS1660 石子合并
- FedNLP: 首个联邦学习赋能NLP的开源框架,NLP迈向分布式新时代
- PyTorch框架学习十九——模型加载与保存
- 备份类型 事务日志_SQL SERVER备份策略
- mysqli.php,PHP: MySQLi - Manual
- H2 database 内存数据库 学习资料
- CMOS模拟集成电路笔记(第二部分)
- 谈谈人工智能的罪与罚
- Apache ShenYu 集成 RocketMQ 实时采集海量日志的实践
- python删除列表元素delete_Python3 tkinter基础 Listbox delete 删除单个、所有元素
- Semantic Parsing via Staged Query Graph Generation: Question Answering with Knowledge Base(笔记)
- 定义类MyProgram,包含两个属性:一个是private的整型属性data、一个是private的String类型属性str,重写toString,equals
- springboot-security安全登录
- numeric_limits 解析
热门文章
- Windows server 2016 学习 一
- nexus7 android 5.0.2,移动数据版Nexus 7可升级Android 5.0.2
- Java 将网络url图片链接转换为File类型对象
- PhotoShop CS6 快捷键大全
- Ubuntu 18.04 添加自定义app到桌面和搜索栏
- 拼多多pdd电商api接口
- 大学计算机组装虚拟实验,计算机硬件组装虚拟实验系统设计研究
- 计算机系的书法作品,我院计算机系举办“家风家训”主题书法绘画大赛
- 第八周周一物联网通信
- 哪些手机支持android q,华为第一批Android Q手机都有哪些?