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 ...
随机推荐
- centos7部署rabbitMq
目录 一.消息中间件相关知识... 1 1.概述... 1 2.消息中间件的组成... 1 3 消息中间件模式分类... 2 4 消息中间件的优势... 3 5 消息中间件应用场景... 4 6 消息 ...
- Forsaken给学生分组
链接:https://ac.nowcoder.com/acm/contest/1221/C来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...
- 网络架构,七层协议,三次握手四次挥手,socket套接字简单编程
一.单机架构 应用领域: 植物大战僵尸 office 二.CS架构 应用领域: QQ 大型网络游戏 计算机发展初期用户去取数据,直接就去主机拿,从这里开始就分出了客户端和服务端. 客户端:用户安装的软 ...
- django Paginator 让分页变得完美
参考大佬地址:https://www.zmrenwu.com/courses/django-blog-tutorial/materials/21/ 类视图 from django.contrib.au ...
- npm 命令行基本操作
npm命令选项选项 说明search 在存储库中查找模块包 npm search expressinstall 使用在存储库或本地位置上的一个package.json文件来安装 ...
- 安卓-去除ActionBar的方法
今天做一个播放器项目,由于要去除ActionBar,纠结好久,原来这么简单 记录一下 只需要修改AndroidManifest.xml文件中的主题即可 <application android: ...
- [转载]一个支持Verilog的Vim插件——自动插入always块
原文地址:一个支持Verilog的Vim插件--自动插入always块作者:hover 插件支持always块的自动插入,如果用户要插入时序always块,需要在端口声明中标志时钟和异步复位信号(仅支 ...
- Nginx Windows下安装使用及权重分配
内容目录 Nginx 下载启动Nginx关闭NginxNginx使用注意事项使用Nginx代理服务器做负载均衡Nginx配置静态资源Nginx权重分配方式Nginx负载均衡参数描述写在最后 Nginx ...
- 我所了解的https
http大家多少都有些了解,毕竟要上网的话是肯定会接触到它的.http有个很明显的缺点,就是传输是明文的,很不安全.针对这个情况,就推出了https,也就是http+ssl/tls. 对于明文不安全的 ...
- 如何检测指定的Windows服务是否启动
在项目中,特别是安装项目中我们经常要判断一些服务是否启动(判断SQL Server是否启动最常见),在.net中我们如何判断指定的Windows服务是否启动呢?首先要知道Windows服务的显示名称, ...