文章同步更新在 CodeFictionist
哈哈哈,在拆開這個特效水了兩天文後,今天要來把壓下去和彈起來的效果合併在一起,讓文字在滑鼠滑過時有壓下去又跳起來的感覺。
跟前兩天單純只用 transition
不同,今天我們要用到 animation
來實現這個效果,畢竟 transition
還是很難做到這種精細的控制。
先來看 code,其實變動的不多:
<div class="bounce-text">
<span>這</span>
<span>是</span>
<span>一</span>
<span>個</span>
<span>彈</span>
<span>跳</span>
<span>的</span>
<span>示</span>
<span>範</span>
</div>
.bounce-text {
font-size: 4rem;
font-weight: bold;
display: inline-block;
position: relative;
}
.bounce-text span {
display: inline-block;
position: relative;
}
.bounce-text span:hover {
animation: jump-text 1.5s 0s ease;
}
@keyframes jump-text {
0%, 100% {
transform: translateY(0) scale(1.1);
}
25%, 75% {
transform: translateY(0) scale(1.2, 0.8);
}
50% {
transform: translateY(-50px) scale(0.8, 1.2);
}
}
圖片難以呈現,我也懶得用 GIF,大家去 CodePen 看吧
可以看到這個復合特效的關鍵是在 @keyframes
中針對 4 段不同的時間點設定不同的 transform
效果,讓文字在滑鼠滑過時有壓下去又跳起來的感覺:
關於 @keyframes
裡的設定,我就直接照搬 This.Web 的參數了。