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 ...
随机推荐
- PostgreSQL创建只读账户
目前PostgreSQL并不能像MySQL一样直接对某个数据库赋予只读权限,现实中有研发需要新建一个用户然后赋予对某个数据库只读权限. 举例说明如何创建 用edbstore用户连接edbstore数据 ...
- String,StringBuffer,StringBulider 三者的区别
1.String 是字符串常量,StringBuffer 和StringBuilder 是字符串变量. 2.运行速度 StringBuilder > StringBuffer > Stri ...
- 【6.10校内test】 noip模拟
题目链接: p1 FBI树 p2 医院设置 p3 加分二叉树 | | | | | | 分 界 线 | | | | | | 应该算是一篇反思博. 对于OI,我真的算不上是热爱(当然不热爱不代表就不 ...
- thread 多线程2
###24.04_多线程(多线程程序实现的方式1)(掌握) * 1.继承Thread * 定义类继承Thread * 重写run方法 * 把新线程要做的事写在run方法中 * 创建线程对象 * 开启新 ...
- C++ 引用深入理解
1.引用作为变量的别名存在,因此可以在一些场合代替指针. 引用相当于指针来说具有更好的可读性和实用性. 例如: /* 编译环境 gcc version 7.4.0 (Ubuntu 7.4.0-1ubu ...
- const关键字 C与C++分析
1 C与C++的区别 1.1.C允许定义两个变量名相同的变量,而C++不允许. 在C语言中是允许定义两个名字相同的全局变量. 在C++中是不允许定义两个名字相同的全局变量. 测试代码: /* 编译环 ...
- Exceptionless
参考 Exceptionless - .Net Core开源日志框架
- Winform CheckBox组,先横向排列,后纵向排列,点击文字,改变Checkbox的状态的方法
开始选用的CheckedListBox控件,不能实现,改为使用ListView控件,可以满足需求.操作步骤如下: 1.将ListView的属性View改为SmallIcon. 2.CheckBox ...
- 【应用容器引擎】Docker笔记
一.Docker是什么? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的linux机器上,也可以实现虚拟化.它是一个轻量级容器技 ...
- 查看 apache 的编译参数
cat /home/oldboy/run/apache/build/config.nice 范例 2: [root@VM-002 ~]# cat /home/oldboy/run/apache/bui ...