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 ...
随机推荐
- UML(统一建模语言)包含9种图
UML分为静态图.动态图 动态图:虚壮活血 () 静态图:租用配对累()
- spring boot-10.国际化
1.在原来spring MVC 中国际化实现步骤 (1)编写国际化配置文件 (2)使用ResourceBundleMessageSource管理国际化资源文件 (3)在页面中取国际化信息 2.spri ...
- oracle 数据库备份与恢复
oracle 数据库备份与恢复 包含四个部分: 1.数据泵备份与恢复 2.rman备份与恢复 3.CSV增量备份恢复 4.截库操作 1.数据泵备份与恢复 expdp/ / impdp 时的 CONTE ...
- centos7 源码编译安装 php
准备工作 下载 PHP 源码包并解压 $ wget https://www.php.net/distributions/php-7.2.19.tar.bz2 $ yum -y install bzip ...
- Java Calendar使用
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...
- phpstudy配置多站点
1.打开vhosts.conf文件 目录 Apache/conf/vhosts.conf #开启apache的vhost模块 (此模块默认是关闭的,去掉前面的#号) LoadModule vh ...
- tomcat部署项目时 报错Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web modules
Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web modules 解决方法: 找到文件 .set ...
- 关于mysql varchar(N)
varchar(N) 能存多少个中文字符? 4.0版本以下,varchar(50),指的是50字节,如果存放UTF8汉字时,只能存16个(每个中文3字节) gbk :每个字符最多占用2个字节 utf8 ...
- 可以提升幸福感的js小技巧(下)
4.数字 4.1 不同进制表示法 ES6中新增了不同进制的书写格式,在后台传参的时候要注意这一点. 29 // 10进制 035 // 8进制29 原来的方式 0o35 // 8进制29 ES6的方式 ...
- HTTP 缓存简单了解
HTTP 缓存简单了解.文章整理了相关资料,记录了部分实践.方便大家轻松了解缓存.能回答上三个问题,HTTP缓存就算理解呢.能否缓存?缓存是否过期?协商缓存? 概要: web缓存 缓存的处理 前端解决 ...