家好，我是公众号3分钟学堂的郭立员。

前端时间帮朋友解决了一个旋转图片过验证的问题，验证是这样子的：

（图片来自网络）

做这种验证脚本需要解决两个问题：一是旋转的角度，二是角度转化成滑动的距离。

我在帮朋友解决这个问题的时候，是这么操作，角度的识别使用了打码平台，滑动距离是通过角度和距离等比换算得到的。

打码平台当时使用的是：快识别平台，后来我在网上查了一下，图鉴、准快、快识别是一家公司的3个平台，内容是完全一样的，用这三个平台哪个都可以。

开发文档地址：

http://www.kuaishibie.cn/docs/anjian.html#pageTitle

因为平台有现成的源码，直接用就行，这里不多说。

使用打码平台上传验证图片以后，会返回一个角度的数值：

数值有正数也有负数，这是为啥呢？拿一个图举例：

这个图如果想要转正图片，需要顺时针旋转270度，因为这个验证只能是顺时针旋转。

但是打码平台会返回值-90，意思是说要逆时针旋转90度，那么对于这个数值，我们要判断一下，如果是正数就可以直接用，如果是负数就需要加上360，也就是-90+360=270。

正负值的问题解决了后，开始是角度与滑动距离的换算，先来看下图

假设图中滑动200的距离（具体以你实际app验证的为准），会旋转一周360度，那么想要完成验证需要旋转270度，旋转四分之三，同理滑动距离也是四分之三，200*（3/4）=150。

在用数学计算公式写一下，假设角度是x，滑动距离是y

x/360=y/200

算出距离y=0.56*x

这里由于200是我案例截图的距离，并不是每个app验证都是，所以0.56的换算比例要根据你实际情况计算。

根据换算比例就可以把打码平台返回的角度带入到公式中，算出滑动距离。

有了滑动距离之后，使用滑动命令完成滑动验证。

对于有些验证会检测滑动轨迹，那么还需要两个随机，一是随机滑动路径，二是随机滑动速度。

这种验证按照上面的逻辑一般就可以通过了，好了本期就这些内容，觉得还行点个赞。

于前端开发人员来说，css是我们再熟悉不过的朋友的，它就相当于是我们页面的衣服，页面好不好看，就看我们css运用的是否炉火纯青[小鼓掌][小鼓掌][小鼓掌]。css学起来简单，但是我们要把它“修炼”到出神入化境界，那这可不是一丁点时间就可以的，需要我们的日积月累，时刻专研。

而今天，就带给大家一个CSS特效-霓虹灯按钮，这也是我看到很不错的效果，带来分享给大家，希望大家喜欢[送心][送心][送心]

效果如下：

那好，废话不多说，开始我们的CSS代码。

准备一个HTML标签

// 这里我们用div标签来模拟button按钮，标签可以随意，a、p、span等都可以
// 通常在开发中使用别的标签来代替button标签，是因为原始的标签样式不好看，
// 我们还得重置样式，而其他标签不带有样式，我们可以更好的控制自己想要的样式，
// 当然，button标签也是可以的，但是如前面所说，原始的样式需要我们重置。
<div class="btn">button</div>

CSS部分的代码

body {
    margin: 0;
    padding: 0;
    background: #000; // 黑色背景，只为更能突出样式效果
}
// 初始化按钮样式
.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    // linear-gradient() 渐变属性，函数用于创建一个表示两种或多种颜色线性渐变的图片
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}

初始样式为这样：

然后我们给按钮加上动画，代码如下：

.btn:hover {
  	// linear: 动画从开始到结束具有相同的速度。
    // infinite: 无限次播放
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

效果就变为下面这样：

最后我们给它加上鼠标移上去的效果，代码如下：

.btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}
.btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

现在这样，就是我们的最终效果了：

就此，我们的霓虹灯的按钮效果就完成了

不足百行，我们就完成了这个效果，以下是我们的CSS的全部代码：

果图:

这里我是通过审核意见那列的值判断操作里面的审核按钮的显示隐藏。

首先审核意见那列后台给我返回的是A、B、null三种值，然后我再将这三种值转换为已驳回、已通过、未审核。三个中文显示在页面上。

这个是通过 ：formatter属性改的，前面有讲过就不细讲了。然后如果是已通过或者已驳回审核按钮都不显示，只有是未审核的情况下才会显示审核按钮。

看代码：

核心代码：

slot-scope="scope"

v-if="scope.row.yzdb01D290 ==null?true:false"

HTML

   <el-table-column 
	   prop="yzdb01D290" 
	   label="审核意见" 
	   :formatter="shyj" 
	   fixed="right"
   ></el-table-column>
   <el-table-column 
	   label="操作" 
	   width="120" 
	   fixed="right">
   <!-- eslint-disable-next-line -->
   <template slot-scope="scope">
    <el-button 
	    type="text" 
	    v-if="scope.row.yzdb01D290 ==null?true:false" 
	    size="small" 
	    style="color:red" 
	    data-toggle="modal" 
	    data-target="#review" 
	    @click="deitstimes"
    >审核</el-button>
   </template>
</el-table-column>

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
如果此篇博文对您有帮助，还请动动小手点点关注 点点赞 收藏 ⭐留言呐~，谢谢 ~ ~