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

<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. C语言Ⅰ作业12—学期总结

    一.我学到的内容 二.我的收获 作业链接 收获 C语言Ⅰ博客作业01 认识了PTA编程,博客园,Markdown基本语法1,Markdown基本语法2 C语言Ⅰ博客作业02 PTA系统常见问题解答 C ...

  2. 初步学习jquery学习笔记(一)

    什么是jquery? Jquery是javascript的一个函数库包含以下功能: html元素选取 html元素的操作 css操作 html事件的函数 javacript的特效 html的遍历和修改 ...

  3. [BZOJ 1535] [Luogu 3426]SZA-Template (KMP+fail树+双向链表)

    [BZOJ 1535] [Luogu 3426]SZA-Template (KMP+fail树+双向链表) 题面 Byteasar 想在墙上涂一段很长的字符,他为了做这件事从字符的前面一段中截取了一段 ...

  4. Django查询数据库返回字典dict数据

    个人观点: 个人认为,在Django项目中, 开发团队为了让使用该框架的用户都使用自带的序列化功能,从而让框架中的SQL返回值很不直观,对于直接使用SQL语句的用户很犯难. 解决: from djan ...

  5. mysql 聚合函数(2)

    平均 svg select avg(sal + IFNULL(comm,0)) as avg_sal from t_emp 总和 sum select sum(sal + IFNULL(comm,0) ...

  6. 定位class时空格注意

    class属性中间的空格并不是空字符串,那是间隔符号,表示的是一个元素有多个class的属性名称,那定位的时候取其中的一个就行(并且要唯一) Selenium2+python自动化73-定位的坑:cl ...

  7. 094、Swarm 中最重要的概念(Swarm01)

    参考https://www.cnblogs.com/CloudMan6/p/7845365.html   从主机层面来看,Docker Swarm 管理的是 Docker Host 集群.所以先来讨论 ...

  8. 四、Vue CLI-异步请求(axios)

    一.模块的安装 npm install axios --save #--save可以不用写 如图: 二.配置main.js import axios from 'axios' Vue.prototyp ...

  9. 关于 Google 公司的一些趣闻

    简评: 很少有科技公司能像 Google 一样象征着这个数字时代,你知道 Google,但不一定知道以下这些有趣数据.这些来自 VizionOnline 的数据概述了不为人知的 Google 趣闻,分 ...

  10. linux之crontab定时器

    一.安装crontab yum -y install vixie-cron yum -y install crontabs 说明:vixie-cron 软件包是 cron 的主程序:crontabs ...