需求: 微信二维码扫描的特效： 就是一条横线上下来回扫描的动画。
本人vue 是初学者，只想记录开发过程中记录点点，若读者看的很不爽，请留言，我一定好好学习天天向上。
实现：其实实现很简单(CSS + -webkit-animation + animation)，网上很多代码，所以我也拷贝了份css代码，放到vue里面用用。
第一步： 需要用css实现一个四边框
第二步： 需要使用一个横线，在四边框上下的滑动
四边框的代码如下：
.photoframe{
position:relative;
width:370px;
height:200px;
padding:3px;
border:6px solid FFFFFF;
}
.photoframe:before, .photoframe:after, .photo:before, .photo:after {
content:"";
position:absolute;
border-style:solid;
border-color:#FF5511;
padding:15px;
}
.photoframe:before {
left:-8px;
top:-8px;
border-width:8px 0 0 8px;
}
.photoframe:after {
right:-8px;
bottom:-8px;
border-width:0 8px 8px 0;
}
.photo:before {
left:-8px;
bottom:-8px;
border-width:0 0 8px 8px;
}
.photo:after {
right:-8px;
top:-8px;
border-width:8px 8px 0 0;
}
那么再来看看 横线上下不断扫描的代码，如下：
.code-bg{
position: relative;
height: 300px; width:420px;
margin: 1px auto;/*此处为了居中*/
background: url() center top no-repeat; /*二维码*/
margin-top: 30rem;
}
.line{
position: absolute;
left: 0px;
z-index: 2;
height: 1px; width:400px;
background: url(../assets/images/button.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; }
}
完成之后，在template添加如下的代码，就可以看到效果了
<template>
<div>
<el-row>
<el-col :span = "2"><i class="el-icon-arrow-left arrow-left" @click="onSubmit"></i></el-col>
<el-col ><h1 class="font-control"> {{this.$t('reminder_title')}}</h1></el-col>
</el-row>
<div class="background">
<div class="code-bg">
<div class="line "></div>
<!-- start camera -->
<div class="photoframe">
<div class="photo">
</div>
</div>
</div>
</div>
</div>
</template>
{{this.$t('reminder_title')}} 这个是使用了国际化的过程。下面的图像就是上面代码实现的效果，
你会发现一条横线不断的上下浮动，产生动画的效果，这个是用来扫描身份证或者护照用的。但是奇怪的是，我发现了个关于 css scoped 的问题。
首先， 这个页面是有背景颜色的，使用的是名为 background 的css，设置的背景颜色是灰色。vue 的router 是使用 this.$router.push 的方式。另外在另个页面上也有名为background（为绿色） 的css，然后我连续的点击多个页面，然后不断的goback，发现到扫描这个页面的时候，颜色突然变成了绿色，而不是灰色。
这就是问题所在： 同名称的css 属性发生了污染的情况，然后我把绿色页面的css 加上 scoped，然后问题就解决了。 这个就是scoped 神奇之处，只会在当前的component里面起作用。除此之外，我接的scoped 在 依赖属性之间也有一定的限制作用（比较神奇，大家可以搜搜）。
但是怎么解释上面的现象呢？ 这个只是会用罢了，我也觉得有点蒙，在扫描的页面上为什么渲染别的页面的css 属性的？ 这个问题我以后慢慢探究把，多探究原理，最近从后端做做前端，觉得也甚是有意思，就记录一下当作成长途中点点滴滴
