# 前言 > Hello！小夥伴！ > 首先非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～ > 哈哈 自我介紹一下 > 暱稱：海轟 > 標籤：程式猿一隻｜C++選手｜學生 > 簡介：因C語言結識程式設計，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～） > 學習經驗：紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語！ > 日常分享：微信公眾號【海轟Pro】記錄生活、學習點滴，分享一些原始碼或者學習資料，歡迎關注～ # 效果展示   # 思路 上面效果可以概括為： - 滑鼠未停留時：button背景與body保持一致（以黑色為例），文字為藍色，同時button四周一條藍色的線條一直圍繞button旋轉 - 滑鼠停留時：button按鈕背景變為藍色，其中文字變為黑色，同時產生陰影、倒影 根據效果圖可以得出實現的一些思路： - 背景顏色的變化使用hover就可以實現 - 難點在於四周的線條 - 這裡海轟的解決辦法是分為上下左右四條線，賦予每一條線一個動畫，通過延時達到類似一條線的效果 這裡使用的藍色： - 藍色：#03e9f4 # Demo程式碼 HTML ```html Haihong Pro ``` CSS ```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最右端 最初位置：  最終位置：  根據上述思路，編寫動畫程式碼 ```css .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%呢 ```css @keyframes animate1{ 0%{ left: -100%; } 50%,100%{ left: 100%; } } ``` 從疑點1的解答中，我們可以發現，每條線在button邊執行的時間只能為0.25s 線條從開始到結束，需要耗時 1s（也就是從0%-100%） ```css /* 假設這樣設定 */ @keyframes animate1{ 0%{ left: -100%; } 100%{ left: 100%; } } ```  因為移動速度為勻速（動畫屬性設定了） 所以到50%需要耗時0.5s 也就是說：線條1執行在button上的時間為：0.5s 這與我們需要的0.25s就有區別 那麼需要怎麼辦呢？ 哈哈，這裡我們將動畫屬性修改一下： ```css @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://img-blog.csdnimg.cn/20210330213212336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIyNTE4Mg==,size_16,color_FFFFFF,t_70#pic_