效果預覽

在線演示

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。

https://codepen.io/comehope/pen/mKdzZM

可交互視頻教程

此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。

請用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cgnk6Sb

源代碼下載

本地下載

每日前端實戰系列的全部源代碼請從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，標準的導航模式：

<nav><ul><li>Home</li></ul> </nav>

居中顯示：

body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: black; }

定義文本和按鈕邊框樣式：

nav ul {padding: 0; }nav ul li {color: white;list-style-type: none;font-size: 32px;font-family: sans-serif;text-transform: uppercase;width: 12em;height: 4em;border: 1px solid rgba(255, 255, 255, 0.2);text-align: center;line-height: 4em;letter-spacing: 0.2em; }

用 before 偽元素定義上邊框和右邊框，其中邊框顏色因會多次被用到，所以采用變量：

:root {--color: dodgerblue; }nav ul li::before {content: '';position: absolute;;width: 0;height: 0;visibility: hidden;top: 0;left: 0;border-top: 1px solid var(--color);border-right: 1px solid var(--color); }

類似地，用 after 偽元素定義右邊框和下邊框：

nav ul li::after {content: '';position: absolute;;width: 0;height: 0;visibility: hidden;bottom: 0;right: 0;border-bottom: 1px solid var(--color);border-left: 1px solid var(--color); }

設計邊框入場的動畫效果，按上、右、下、左的順序依次顯示邊框，為了方便調整動畫的速度設置了與時間相關的變量：

:root {--time-slot-length: 0.1s;--t1x: var(--time-slot-length);--t2x: calc(var(--time-slot-length) * 2);--t3x: calc(var(--time-slot-length) * 3);--t4x: calc(var(--time-slot-length) * 4); }nav ul li:hover::before, nav ul li:hover::after {width: 100%;height: 100%;visibility: visible; }nav ul li:hover::before {transition:visibility 0s,width linear var(--t1x),height linear var(--t1x) var(--t1x); }nav ul li:hover::after {transition: visibility 0s var(--t2x),width linear var(--t1x) var(--t2x),height linear var(--t1x) var(--t3x); }

設計邊框出場的動畫效果，與入場的順序相反：

nav ul li::before {transition:height linear var(--t1x) var(--t2x),width linear var(--t1x) var(--t3x),visibility 0s var(--t4x); }nav ul li::after {transition:height linear var(--t1x),width linear var(--t1x) var(--t1x),visibility 0s var(--t2x); }

讓按鈕文字在描邊期間變色：

nav ul li {transition: var(--t4x); }nav ul li:hover {color: var(--color); }

最后，在描邊結束后，在按鈕四周增加一個脈沖動畫，加強動感：

nav ul li:hover {animation: pulse ease-out 1s var(--t4x); }@keyframes pulse {from {box-shadow: 0 0 rgba(30, 144, 255, 0.4);}to {box-shadow: 0 0 0 1em rgba(30, 144, 255, 0);} }

大功告成！

原文地址：https://segmentfault.com/a/1190000015089396

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的如何把握好 transition 和 animation 的时序，创作描边按钮特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。