「按鍵精靈」旋轉驗證

家好，我是公眾號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>

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

在線咨詢

上一篇：分享幾個漂亮的宇宙風格的按鈕動畫效果，讓你喜歡上CSS
下一篇：「胖達分享」網頁中的圖片和html文檔的路徑

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「按鍵精靈」旋轉驗證

準備一個HTML標簽

CSS部分的代碼

您的項目需求