如何把握好 transition 和 animation 的時序,創作描邊按鈕特效
阿新 • • 發佈:2018-11-22
效果預覽
按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。
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