家好，我是公眾號3分鐘學(xué)堂的郭立員。

前端時(shí)間幫朋友解決了一個(gè)旋轉(zhuǎn)圖片過驗(yàn)證的問題，驗(yàn)證是這樣子的：

（圖片來自網(wǎng)絡(luò)）

做這種驗(yàn)證腳本需要解決兩個(gè)問題：一是旋轉(zhuǎn)的角度，二是角度轉(zhuǎn)化成滑動的距離。

我在幫朋友解決這個(gè)問題的時(shí)候，是這么操作，角度的識別使用了打碼平臺，滑動距離是通過角度和距離等比換算得到的。

打碼平臺當(dāng)時(shí)使用的是：快識別平臺，后來我在網(wǎng)上查了一下，圖鑒、準(zhǔn)快、快識別是一家公司的3個(gè)平臺，內(nèi)容是完全一樣的，用這三個(gè)平臺哪個(gè)都可以。

開發(fā)文檔地址：

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

因?yàn)槠脚_有現(xiàn)成的源碼，直接用就行，這里不多說。

使用打碼平臺上傳驗(yàn)證圖片以后，會返回一個(gè)角度的數(shù)值：

數(shù)值有正數(shù)也有負(fù)數(shù)，這是為啥呢？拿一個(gè)圖舉例：

這個(gè)圖如果想要轉(zhuǎn)正圖片，需要順時(shí)針旋轉(zhuǎn)270度，因?yàn)檫@個(gè)驗(yàn)證只能是順時(shí)針旋轉(zhuǎn)。

但是打碼平臺會返回值-90，意思是說要逆時(shí)針旋轉(zhuǎn)90度，那么對于這個(gè)數(shù)值，我們要判斷一下，如果是正數(shù)就可以直接用，如果是負(fù)數(shù)就需要加上360，也就是-90+360=270。

正負(fù)值的問題解決了后，開始是角度與滑動距離的換算，先來看下圖

假設(shè)圖中滑動200的距離（具體以你實(shí)際app驗(yàn)證的為準(zhǔn)），會旋轉(zhuǎn)一周360度，那么想要完成驗(yàn)證需要旋轉(zhuǎn)270度，旋轉(zhuǎn)四分之三，同理滑動距離也是四分之三，200*（3/4）=150。

在用數(shù)學(xué)計(jì)算公式寫一下，假設(shè)角度是x，滑動距離是y

x/360=y/200

算出距離y=0.56*x

這里由于200是我案例截圖的距離，并不是每個(gè)app驗(yàn)證都是，所以0.56的換算比例要根據(jù)你實(shí)際情況計(jì)算。

根據(jù)換算比例就可以把打碼平臺返回的角度帶入到公式中，算出滑動距離。

有了滑動距離之后，使用滑動命令完成滑動驗(yàn)證。

對于有些驗(yàn)證會檢測滑動軌跡，那么還需要兩個(gè)隨機(jī)，一是隨機(jī)滑動路徑，二是隨機(jī)滑動速度。

這種驗(yàn)證按照上面的邏輯一般就可以通過了，好了本期就這些內(nèi)容，覺得還行點(diǎn)個(gè)贊。

于前端開發(fā)人員來說，css是我們再熟悉不過的朋友的，它就相當(dāng)于是我們頁面的衣服，頁面好不好看，就看我們css運(yùn)用的是否爐火純青[小鼓掌][小鼓掌][小鼓掌]。css學(xué)起來簡單，但是我們要把它“修煉”到出神入化境界，那這可不是一丁點(diǎn)時(shí)間就可以的，需要我們的日積月累，時(shí)刻專研。

而今天，就帶給大家一個(gè)CSS特效-霓虹燈按鈕，這也是我看到很不錯(cuò)的效果，帶來分享給大家，希望大家喜歡[送心][送心][送心]

效果如下：

那好，廢話不多說，開始我們的CSS代碼。

準(zhǔn)備一個(gè)HTML標(biāo)簽

// 這里我們用div標(biāo)簽來模擬button按鈕，標(biāo)簽可以隨意，a、p、span等都可以
// 通常在開發(fā)中使用別的標(biāo)簽來代替button標(biāo)簽，是因?yàn)樵嫉臉?biāo)簽樣式不好看，
// 我們還得重置樣式，而其他標(biāo)簽不帶有樣式，我們可以更好的控制自己想要的樣式，
// 當(dāng)然，button標(biāo)簽也是可以的，但是如前面所說，原始的樣式需要我們重置。
<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() 漸變屬性，函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}

初始樣式為這樣：

然后我們給按鈕加上動畫，代碼如下：

.btn:hover {
  	// linear: 動畫從開始到結(jié)束具有相同的速度。
    // infinite: 無限次播放
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

效果就變?yōu)橄旅孢@樣：

最后我們給它加上鼠標(biāo)移上去的效果，代碼如下：

.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;
}

現(xiàn)在這樣，就是我們的最終效果了：

就此，我們的霓虹燈的按鈕效果就完成了

不足百行，我們就完成了這個(gè)效果，以下是我們的CSS的全部代碼：

果圖:

這里我是通過審核意見那列的值判斷操作里面的審核按鈕的顯示隱藏。

首先審核意見那列后臺給我返回的是A、B、null三種值，然后我再將這三種值轉(zhuǎn)換為已駁回、已通過、未審核。三個(gè)中文顯示在頁面上。

這個(gè)是通過 ：formatter屬性改的，前面有講過就不細(xì)講了。然后如果是已通過或者已駁回審核按鈕都不顯示，只有是未審核的情況下才會顯示審核按鈕。

看代碼：

核心代碼：

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>

沒了，結(jié)束了，是不是很簡單吶，如有問題，歡迎留言。
如果此篇博文對您有幫助，還請動動小手點(diǎn)點(diǎn)關(guān)注 點(diǎn)點(diǎn)贊 收藏 ?留言吶~，謝謝 ~ ~