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

<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. Elasticsearch-使用映射来定义各种文档

    ES-使用映射来定义各种文档 每篇文档属于一种类型,而每种类型属于一个索引.从数据的逻辑划分来看,可以认为索引是数据库,而类型是数据库中的表.类型包含了映射中每个字段的定义.映射包括了该类型的文档中可 ...

  2. [转帖]IIS7 应用程序池的 托管管道模式与集成模式小结

    IIS7 应用程序池的 托管管道模式与集成模式小结 https://www.jb51.net/article/26311.htm IIS7的一些问题. 关注脚本之家微信公众号(jb51net) 每周都 ...

  3. HDU 2586——How far away ?

    Time limit 1000 ms Memory limit 32768 kB Description There are n houses in the village and some bidi ...

  4. HNUSTOJ-1621 Picking Cabbage(状态压缩DP)

    1621: Picking Cabbage 时间限制: 2 Sec  内存限制: 32 MB提交: 26  解决: 14[提交][状态][讨论版] 题目描述 Once, Doraemon and  N ...

  5. SQL注入的一些技巧分享

    先上一道简单的ctf注入题: 一道利用order by进行注入的ctf题 很不错的一道利用order by的注入题,之前不知道order by除了爆字段还有这种操作. 原题地址:http://chal ...

  6. 手把手带你了解sass

    sass的使用 减少重复的工作 1.变量的声明: 是以$开头给变量命名; $height-color: #F30 2.变量的使用范围: 变量可以在多个地方存在,不一定限制在代码块中.但是如果定义在了代 ...

  7. 阿里服务器+Centos7.4+Tomcat+JDK部署

    适用对象 本文档介绍如何使用一台基本配置的云服务器 ECS 实例部署 Java web 项目.适用于刚开始使用阿里云进行建站的个人用户. 配置要求 这里列出的软件版本仅代表写作本文档使用的版本.操作时 ...

  8. 自己对GIS的思考

    这只是我自己的理解,谈不上对整个行业的理解,只能从自己的角度谈谈GIS,谈谈爱和恨. 现在在武汉的一所所谓的全国GIS数一数二的学校里面读硕士,从高中开始我就很喜欢地理学科,大学选择了地球信息科技这个 ...

  9. keepalived的工作原理

    keepalived的工作原理 首先简单介绍一下vrrp协议 vrrp协议 用来实现路由器冗余的协议: Vrrp协议是为了消除在静态缺省路由环境下路由器单点故障引起的网络失效而设计的主备模式的协议,使 ...

  10. A Magic Lamp HDU - 3183 (逆向贪心/RMQ)

    Kiki likes traveling. One day she finds a magic lamp, unfortunately the genie in the lamp is not so ...