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 ...
随机推荐
- Css设置最优先
input{ width: 220px !important; } css中 加上 !important 用一些前端框架,源文件修改不便时 可以这样用
- MySQL -3- 基础应用
1.数值类型 TINYINT --极小整数SMALLINT --较小整数MEDIUMINT --中型整数INT --常规整数BIGINT --较大整数FLOAT --小型单精度DOUBLE --常规双 ...
- centos7 下网卡的配置
一般通过修改配置文件的方式去修改: 网卡配置文件位置 /etc/sysconfig/network-scripts/ifcfg-ens33 DNS配置文件位置 /etc ...
- Python 入门之 软件开发规范
Python 入门之 软件开发规范 1.软件开发规范 -- 分文件 (1)为什么使用软件开发规范: 当几百行--大几万行代码存在于一个py文件中时存在的问题: 不便于管理 修改 可读性差 加载速度慢 ...
- C#实现Web链接启动应用程序
C#实现Web链接启动应用程序 最近需要配合Web端实现用户点击链接来启动应用程序并且需要能够传参数给应用程序. 那么就可以使用注册表来实现这个功能 编写注册表可以在软件安装程序中加入,也可以在软件启 ...
- Linux文档整理之【Jenkins+Docker自动化部署.Net Core】
这次整理的文档是Jenkins+Docker实现自动化部署,很早之前就写的,今天有时间就搬到博客园做个记录. Jenkins是基于Java开发的一种持续集成工具,主要用于持续.自动的构建/测试软件等相 ...
- check cve
今天想检查一下 Gitlab 11.9.0 产品受哪些 cve 的影响.其实网上已经有很多网站可以查询产品的相关 cve,但就是粒度比较粗.我想在 cve 列表中筛选出特定的版本,已经特定的版本,比如 ...
- Redis集群部署一直卡在Waiting for the cluster to join ......(Redis集群总线配置)
redis集群总线端口为redis客户端端口加上10000,比如说你的redis 6379端口为客户端通讯端口,那么16379端口为集群总线端口 我搭建的redis集群中端口号是从 7001 ~ 70 ...
- 转载:一种云环境下SaaS软件部署方法及装置与流程
转载:http://www.xjishu.com/zhuanli/55/201710103925.html 本发明涉及云计算技术领域,特别是涉及一种云环境下SaaS软件部署方法及装置. 背景技术: 随 ...
- 002-Saltstack自动化操作记录(2)-配置使用
之前梳理了就是第一篇001,下面说说saltstack配置及模块使用: 为了试验效果,再追加一台被控制端minion机器192.168.1.118需要在master控制端机器上做好主机名映射关系 1 ...