CSS实现二维码扫描的效果
扫描二维码的效果,我原以为不好写呢,后来想了想其实挺简单的,几行代码,走起
<div class="code-bg">
<div class="line"></div>
</div>
.code-bg{
position: relative;
height: 200px; width: 200px;
margin: 0px auto;/*此处为了居中*/
background: url(img/ewm1.jpg) center top no-repeat; /*二维码*/
}
.line{
position: absolute;
left: -80px;
z-index: 2;
height: 3px; width: 360px;
background: url(img/share/dapai.png) no-repeat; /*上下扫的线*/
/*动画效果*/
animation: myScan 1s infinite alternate;
-webkit-animation: myScan 1s infinite alternate;
}
@keyframes myScan{
from { top:0px; }
to { top: 197px; }
}
-webkit-@keyframes myScan{
from { top:0px; }
to { top: 197px; }
}
我这里不方便截图,那就这样吧,是不是很简单。这样就实现了
CSS实现二维码扫描的效果的更多相关文章
- 二维码扫描利用ZBar实现
上次是根据系统的属性自己封装的一个二维码扫描,这次给大家介绍一下基于ZBar集成的类似于QQ二维码扫描界面的二维码扫描的效果. ...
- Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果
Android 高手进阶(21) 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明出处:http://blog.csdn.net/xiaanming/article/detail ...
- 【转】Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果--不错
原文网址:http://blog.csdn.net/xiaanming/article/details/10163203 转载请注明出处:http://blog.csdn.net/xiaanming/ ...
- 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果(转)
转载:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信 中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从 ...
- [Unity3D]自制UnityForAndroid二维码扫描插件
一周左右终于将二维码生成和扫描功能给实现了,终于能舒缓一口气了,从一开始的疑惑为啥不同的扫码客户端为啥扫出来的效果不同?通用的扫描器扫出来就是一个下载APK,自制的扫描器扫出来是想要的有效信息,然后分 ...
- Android仿微信二维码扫描
转载:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一 ...
- iOS二维码扫描IOS7系统实现
扫描相关类 二维码扫描需要获取摄像头并读取照片信息,因此我们需要导入系统的AVFoundation框架,创建视频会话.我们需要用到一下几个类: AVCaptureSession 会话对象.此类作为硬件 ...
- iOS - 二维码扫描和应用跳转
序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如ZXing或者ZBar.使用时集成麻烦, ...
- iOS开发-二维码扫描和应用跳转
iOS开发-二维码扫描和应用跳转 序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...
随机推荐
- HDU 1029 Ignatius and the Princess IV (动态规划、思维)
Ignatius and the Princess IV Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32767 K ( ...
- CDH5.X文档
属性参数 https://www.cloudera.com/documentation/enterprise/properties.html
- 2019CCPC厦门游记
距离上次2018CCPC吉林打铁一年有余,这次的厦门也是我们team拿到的第一块区域赛牌子,写一篇博客留念一下QAQ. 作为弱校的菜鸡队,我们提前两天就来到厦门,不得不说刚到厦门的两天还是很快乐的,住 ...
- POJ 2955 Brackets 区间DP 入门
dp[i][j]代表i->j区间内最多的合法括号数 if(s[i]=='('&&s[j]==')'||s[i]=='['&&s[j]==']') dp[i][j] ...
- 读取CSV文件存入map中(C++)
自己平时操作文件用的不多,今天小伙伴让帮忙写一下这个,顺便记一下.实现功能:从"翻译.csv"文件中读取出字符串,以","作为分隔符,将每一行对应存入map中. ...
- 异步任务报错-Celery: WorkerLostError: Worker exited prematurely: signal 9 (SIGKILL)
现象: 异步任务: 测试环境正常,线上环境报错 使用celery 进行后端异步任务时,报错: Celery: WorkerLostError: Worker exited prematurely: s ...
- 移动端 h5 适配之必知必会
建议大家先去看看这篇文章 https://juejin.im/post/5cddf289f265da038f77696c?utm_source=gold_browser_extension(来自掘金: ...
- npm学习(八)之如何使用语义化版本
npm的语义化版本控制——Semantic versioning 在新发布的代码中传达更改的程度非常重要,因为有时更新会破坏包需要的代码(称为依赖项).语义化版本控制(semver)是一个旨在解决这个 ...
- 深入理解java虚拟机(2)
一.对象的访问 ----------------------------------------------------- 1.对象的访问与java栈.堆和方法区之间的关联关系. eg:Object ...
- JavaSE基础:泛型
泛型 1.引入 情景模式描述,假设完成一个学生的成绩的情况: 整数: math=80,english=70 小数: math=85.6,englisth=77.8 字符串: math="66 ...