文章同步更新在 CodeFictionist
昨天講了文字壓縮的效果,今天我們來講文字彈跳的效果。
其實也沒什麼大不了的,昨天的 code 抄一抄,改一下 transform
裡面的內容就好,嗯,很簡單吧 www。
所以我們直接來看 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;
transition: transform 0.3s cubic-bezier(0.25, 1.5, 0.5, 1);
}
.bounce-text span:hover {
transform: translateY(-20px) scale(1.1);
}
嗯,你看吧,就是改一下 transform
,讓 hover
時文字上移並稍微放大,就有了彈跳的效果。(又是水文的一天~)
這裡補充一個昨天忘記說的的東西:cubic-bezier
!
cubic-bezier
是用來定義 CSS 動畫速度曲線的函數,透過四個控制點 (x1, y1, x2, y2)
來決定動畫的加速度和減速方式。
x1
和 x2
決定動畫進行時間的分布(橫軸),y1
和 y2
則決定動畫效果的速度曲線(縱軸),讓動畫效果更加自然或具有彈性。
像 ease
其實就是 cubic-bezier(0.25, 0.1, 0.25, 1)
。
很難懂對吧?沒事,我也沒完全了解這玩意兒的真面目,我們先會用就好了 www。