前言

Hello！小伙伴！
首先非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～
哈哈自我介紹一下
昵稱：海轟
標簽：程式猿一只｜C++選手｜學生
簡介：因C語言結識編程，隨后轉入計算機專業，有幸拿過國獎、省獎等，已保研，目前正在學習C++/Linux（真的真的太難了～）
學習經驗：扎實基礎 + 多做筆記 + 多敲代碼 + 多思考 + 學好英語！
日常分享：微信公眾號【海轟Pro】記錄生活、學習點滴，分享一些源代碼或者學習資料，歡迎關注～

效果展示

在這里插入圖片描述

思路

上面效果可以概括為：

滑鼠未停留時：button背景與body保持一致（以黑色為例），文字為藍色，同時button四周一條藍色的線條一直圍繞button旋轉
滑鼠停留時：button按鈕背景變為藍色，其中文字變為黑色，同時產生陰影、倒影

根據效果圖可以得出實作的一些思路：

背景顏色的變化使用hover就可以實作
難點在于四周的線條
這里海轟的解決辦法是分為上下左右四條線，賦予每一條線一個影片，通過延時達到類似一條線的效果

這里使用的藍色：

藍色：#03e9f4

Demo代碼

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://www.cnblogs.com/haihongpro/archive/2021/04/01/style.css">
    <title>Document</title>
</head>
<body>
    <button >
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Haihong Pro
    </button>
</body>
</html>

CSS

html,body{
    margin: 0;
    height: 100%;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
}
.btn{
    width: 300px;
    height: 120px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 36px;
    color: #03e9f4;
    /* 字符間的距離 */
    letter-spacing: 2px;
    background: transparent;
    border: none;
    position: relative;
    overflow: hidden;
    transition: 0.5s;
}
.btn:hover{
    background: #03e9f4;
    color: black;
    box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 200px #03e9f4;
    /* 倒影 */
-webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.btn span{
    position: absolute;
    content: '';
}
.btn span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    animation: animate1 1s linear infinite;
    background: linear-gradient(90deg,transparent,#03e9f4);
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}

.btn span:nth-child(2){
    top: -100%;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}

.btn span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.55s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}

.btn span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

原理解釋

這里還是主要講講四周線條的影片效果吧

四條線條的初始位置如下：
在這里插入圖片描述

注：

這里將顏色改為紅色，線條寬度為20px，便于觀察
這里說的初始位置是指影片開始時的初始位置

以一條線條（第一條）的影片為例

其css設定為：絕對定位 position:absolute top=0 left=0

初始位置如圖：
在這里插入圖片描述

第一條線條影片需要實作的效果

線條頭部從button最左端開始移動
平行向右移動
最終停下位置為：線條尾部到達button最右端

最初位置：
起始位置
最終位置：
最后位置
根據上述思路，撰寫影片代碼

.btn span:nth-child(1){
    top: 0;
    left: 100%;
    width: 100%;
    height: 20px;
    animation: animate1 1s linear infinite; 
    background: linear-gradient(90deg,transparent,red);
}
// 影片：從左到右 
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }

效果如下：

在這里插入圖片描述
我們的需求是：線條只需要在button區域進行影片，其他區域用戶不可見

解決辦法也很簡單：button中設定：overflow: hidden;

效果如下：
在這里插入圖片描述

同理，再分別對其他三條邊進行設定就可以了

第二條線效果：

在這里插入圖片描述
第三條線效果：

在這里插入圖片描述

第四條線條效果：

在這里插入圖片描述

疑點詳解

疑點1

估計細心的小伙伴會注意到

影片animate1延遲為0
影片animate2延遲為0.25s
影片animate3延遲為0.5s
影片animate4延遲為0.75s

為什么會這樣設定呢？

emmm 這里就說說海轟自己的理解吧

首先，我們將每一個影片的時間都位置為了 1s

為了達到連貫的效果，也就是：

線條1頭部到達button最右端時，線條2頭部恰好從button最上端向下開始移動
線條2頭部到達button最下端時，線條3頭部恰好從button最右端向左開始移動
線條3頭部到達button最左端時，線條4頭部恰好從button最下端開始向上移動
線條4頭部到達button最上端時，線條1頭部恰好從button最左端開始向右移動
依次回圈

在這里插入圖片描述
從上述的效果描述中，我們可以得知，從線條4頭部到達最上端時，線條1恰好又進行第二次影片

也就是每次影片間隔了1s

每條線運行的時間又相同，所以在button上移動的時間也是相同的

均為 1s/4=0.25s

也就是說：線條1頭部從button最左端到最右端，耗時0.25s

簡單的理解：

每隔1s線條1就要出發一次
為了得到連貫效果，必須要求1s之內，其他3條線都跑完button三條邊
而跑完每一條邊需要的時間又是一樣的（這個是通過ambition設定的）
從而得出每一條邊需要 1s/4 = 0.25s

此時，線條2才開始影片，也就需要延時0.25s

同理，線條3、4 的延時也就累計就可以了

疑點2

為什么影片設定是0%-50%呢

@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}

從疑點1的解答中，我們可以發現，每條線在button邊運行的時間只能為0.25s

線條從開始到結束，需要耗時 1s（也就是從0%-100%）

/* 假設這樣設定 */
@keyframes animate1{
    0%{
        left: -100%;
    }
    100%{
        left: 100%;
    }
}

在這里插入圖片描述

因為移動速度為勻速（影片屬性設定了）

所以到50%需要耗時0.5s

也就是說：線條1運行在button上的時間為：0.5s

這與我們需要的0.25s就有區別

那么需要怎么辦呢？

哈哈，這里我們將影片屬性修改一下：

@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}

啥意思呢？

簡單理解就是只用了一半的時間（0.5s）就從開始狀態運行到了最終狀態（0%-100%）

那么從0%-50%就只需要0.25s了

注：這里海轟說的估計不是很好理解，但是自己心里知道咋回事，不太會描述，不懂的小伙伴可以查查ambition的介紹

符合要求！

結語

學習來源：

https://codepen.io/bhadupranjal/pen/vYLZYqQ

css只會一點點，學習之余從喜歡看一些大神級別的css效果展示，根據原始碼一點一點學習知識點，文中有不對的地方，歡迎指出～

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270897.html

標籤：其他

上一篇：「免費開源」基于Vue和Quasar的前端SPA專案crudapi后臺管理系統實戰之動態表關系管理（六）

下一篇：(辦公)輕松學 React-Router 4(20210401)

「HTML+CSS」--自定義按鈕樣式【004】

前言

效果展示

思路

Demo代碼

原理解釋

疑點詳解

疑點1

疑點2

結語