css 扫描框,CSS3 条形码扫描动画
CSS
语言：
CSSSCSS
确定
.preloader-scan {
position: fixed;
left: 0;
right: 0;
max-width: 200px;
display: table;
margin: 0 auto;
height: 100%;
text-align: center;
}
.preloader-scan li:nth-child(1) {
width: 1px;
}
.preloader-scan li:nth-child(2) {
width: 1px;
}
.preloader-scan li:nth-child(3) {
width: 5px;
}
.preloader-scan li:nth-child(4) {
width: 1px;
}
.preloader-scan li:nth-child(5) {
width: 3px;
}
.preloader-scan li:nth-child(6) {
width: 5px;
}
.preloader-scan li:nth-child(7) {
width: 1px;
}
.preloader-scan li:nth-child(8) {
width: 4px;
}
.preloader-scan li:nth-child(9) {
width: 1px;
}
.preloader-scan li:nth-child(10) {
width: 4px;
}
.preloader-scan li:nth-child(11) {
width: 3px;
}
.preloader-scan li:nth-child(12) {
width: 2px;
}
.preloader-scan li:nth-child(13) {
width: 4px;
}
.preloader-scan li:nth-child(14) {
width: 5px;
}
.preloader-scan li:nth-child(15) {
width: 4px;
}
.preloader-scan li:nth-child(16) {
width: 4px;
}
.preloader-scan li:nth-child(17) {
width: 2px;
}
.preloader-scan li:nth-child(18) {
width: 4px;
}
.preloader-scan li:nth-child(19) {
width: 3px;
}
.preloader-scan li:nth-child(20) {
width: 5px;
}
.preloader-scan li:nth-child(21) {
width: 1px;
}
.preloader-scan li:nth-child(22) {
width: 1px;
}
.preloader-scan li:nth-child(23) {
width: 2px;
}
.preloader-scan li:nth-child(24) {
width: 4px;
}
.preloader-scan ul {
height: 100%;
display: table-cell;
vertical-align: middle;
list-style-type: none;
text-align: center;
}
.preloader-scan li {
display: inline-block;
width: 2px;
height: 50px;
background-color: #444;
}
.preloader-scan .laser {
width: 150%;
margin-left: -25%;
background-color: tomato;
height: 1px;
position: absolute;
top: 40%;
z-index: 2;
box-shadow: 0 0 4px red;
-webkit-animation: scanning 2s infinite;
animation: scanning 2s infinite;
}
.preloader-scan .diode {
-webkit-animation: beam 0.01s infinite;
animation: beam 0.01s infinite;
}
body {
height: 100%;
}
@-webkit-keyframes beam {
50% {
opacity: 0;
}
}
@keyframes beam {
50% {
opacity: 0;
}
}
@-webkit-keyframes scanning {
50% {
-webkit-transform: translateY(75px);
transform: translateY(75px);
}
}
@keyframes scanning {
50% {
-webkit-transform: translateY(75px);
transform: translateY(75px);
}
}
css 扫描框,CSS3 条形码扫描动画相关推荐
- css音乐字幕,css3实现音乐动画播放【原创】
刚刚做了一个项目,涉及到音乐播放动画的效果,通过查找资料学习,最终实现了这一效果,还是满满的成就感,在这里就把实现的代码奉献给大家 先给大家看下效果图 第一步:首先写好HTML代码 是不是很简单呢 第 ...
- Zxing二维码精简(竖屏、拉伸处理、扫描框大小和扫描线移动)
http://blog.csdn.net/xinchen200/article/details/18036695 转载于:https://my.oschina.net/liangzhenghui/bl ...
- Android ZXing 二维码、条形码扫描介绍
最近公司的Android项目需要用到摄像头做条码或二维码的扫描,Google一下,发现一个开源的 ZXing项目.它提供二维码和条形码的扫描.扫描条形码就是直接读取条形码的内容,扫描二维码是按照自己指 ...
- 二维码、条形码扫描——使用Google ZXing
我在项目中用到了二维码扫描的技术,用的是Google提供的ZXing开源项目,它提供二维码和条形码的扫描.扫描条形码就是直接读取条形码的内容,扫描二维码是按照自己指定的二维码格式进行编码和解码. 可以 ...
- AR涂涂乐⭐二、 给material赋予材质、移除material、调整扫描框透明度
1.给material赋予材质: 在Project新建materials文件夹,新建material, 在其shader选项中选择Mobile--Particles--Additive,将制作好的不同 ...
- css3 发光字,CSS3发光字动画
html> 无标题文档 *{ margin:; padding:} img{ width:200px; height:200px; border:2px solid #000} .back h5 ...
- SAP UI5 应用开发教程之四十八 - 如何在 SAP UI5 应用里开发条形码扫描功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- ios ZXing 二维码、条形码扫描
转自:http://finalshares.com/read-6901?jike-236 扫描多条: https://github.com/TheLevelUp/ZXingObjC/pull/235 ...
- iOS系统原生二维码条形码扫描
本文讲述如何用系统自带的东东实现二维码扫描的功能:点击当前页面的某个按钮,创建扫描VIEW.细心的小伙伴可以发现 title被改变了,返回按钮被隐藏了.这个代码自己写就行了,与本文关系不大...绿色的 ...
最新文章
- stm32官方例程在哪找_STM32开发学习资料合集
- href脱离iframe显示
- mybatis collection标签_一对多的关系，在MyBatis中如何映射？
- 用python玩转数据测试答案_大学慕课2020用Python玩转数据章节测试答案
- AndroidStudio安卓原生开发_activity关闭的时候把数据传递给上一个activity---Android原生开发工作笔记93
- Mac如何关闭触控板防止误触？内置的设置就可以达成
- 实用的BeanUtils工具类
- 编程语言学习概要与学习方法
- (lintcode)第4题 丑数II
- Spring系列第20篇：@Conditional通过条件来控制bean的注册
- 嘀嗒APP打车体验记
- B站有哪些值得Java初学者看的视频，Java学习路线
- js将阿拉伯数字转换成中文的大写数字
- IE浏览器打不开网页，其他浏览器却可以打开
- 关于Android中TextView的setText方法报错
- 怎么确定步进电机的步距角
- 关闭手机相机声音教程（理论支持所有S60V3）
- 五种常见的DNS攻击类型及应对方式
- KeyError: ‘Spider not found: itcast‘ 运行scrapy crawl时报错原因总结
- 泰勒展开 — Taylor Expansion