前言
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="style.css">
<title>Document</title>
</head>
<body>
<button class="btn">
<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的介紹
符合要求！
結語
學習來源：
css只會一點點，學習之余從喜歡看一些大神級別的css效果展示，根據源碼一點一點學習知識點，文中有不對的地方，歡迎指出～
