扫描二维码的效果,我原以为不好写呢,后来想了想其实挺简单的,几行代码,走起

<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实现二维码扫描的效果的更多相关文章

  1. 二维码扫描利用ZBar实现

    上次是根据系统的属性自己封装的一个二维码扫描,这次给大家介绍一下基于ZBar集成的类似于QQ二维码扫描界面的二维码扫描的效果.                                     ...

  2. Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果

      Android 高手进阶(21)  版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明出处:http://blog.csdn.net/xiaanming/article/detail ...

  3. 【转】Android 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果--不错

    原文网址:http://blog.csdn.net/xiaanming/article/details/10163203 转载请注明出处:http://blog.csdn.net/xiaanming/ ...

  4. 基于google Zxing实现二维码、条形码扫描,仿微信二维码扫描效果(转)

    转载:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信 中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从 ...

  5. [Unity3D]自制UnityForAndroid二维码扫描插件

    一周左右终于将二维码生成和扫描功能给实现了,终于能舒缓一口气了,从一开始的疑惑为啥不同的扫码客户端为啥扫出来的效果不同?通用的扫描器扫出来就是一个下载APK,自制的扫描器扫出来是想要的有效信息,然后分 ...

  6. Android仿微信二维码扫描

    转载:http://blog.csdn.net/xiaanming/article/details/10163203 了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一 ...

  7. iOS二维码扫描IOS7系统实现

    扫描相关类 二维码扫描需要获取摄像头并读取照片信息,因此我们需要导入系统的AVFoundation框架,创建视频会话.我们需要用到一下几个类: AVCaptureSession 会话对象.此类作为硬件 ...

  8. iOS - 二维码扫描和应用跳转

    序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如ZXing或者ZBar.使用时集成麻烦, ...

  9. iOS开发-二维码扫描和应用跳转

    iOS开发-二维码扫描和应用跳转   序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...

随机推荐

  1. windows qt 使用openssl API

    1.下载安装openssl http://dl.pconline.com.cn/download/355862-1.html 版本: OpenSSL(Win32) 1.0.1g 2.配置QT项目文件, ...

  2. zabbix监控大数据

    参考: https://github.com/Staroon/zabbix-hadoop-template 支持监控HDFS.NameNode, YARN ResourceManager, Hive, ...

  3. css样式实例

    * { box-sizing: border-box; } /*box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素*/ body { font: Arial; margin:; } ...

  4. [.net core]7 4种app key value的配置方法及优先顺序

    就是这货 点开查看内容 { "Logging": { "LogLevel": { "Default": "Warning" ...

  5. QItemDelegate edit某个控件后把数据写回model

    QWidget *TrackDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const ...

  6. JavaSE基础:泛型

    泛型 1.引入 情景模式描述,假设完成一个学生的成绩的情况: 整数: math=80,english=70 小数: math=85.6,englisth=77.8 字符串: math="66 ...

  7. DNS 缓存投毒

    原文:[DNS Cache Poisoning]( https://medium.com/iocscan/dns-cache-poisoning-bea939b5afaf) 译者:neal1991 w ...

  8. flutter-常见的基础组件(一)

    flutter 1.Text 文本组件 Text( 'czklove', //文本上的文字 style: TextStyle( // style 代表对文字的描述 fontSize: 18, //文字 ...

  9. css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进

    一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...

  10. Assets.xcassets的详细使用方法

    开始之前,首先回顾一下iOS7初体验(1)——第一个应用程序HelloWorld中的一张图,如下所示: 本文分享一下Images.xcassets的体验~_~ 1. 打开此前使用过的HelloWorl ...