iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0

文章同步更新在 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) 來決定動畫的加速度和減速方式。
x1x2 決定動畫進行時間的分布(橫軸),y1y2 則決定動畫效果的速度曲線(縱軸),讓動畫效果更加自然或具有彈性。
ease 其實就是 cubic-bezier(0.25, 0.1, 0.25, 1)
很難懂對吧?沒事,我也沒完全了解這玩意兒的真面目,我們先會用就好了 www。


上一篇
Day 15 - 壓縮文字效果
下一篇
Day 17 - 彈跳文字效果最終回
系列文
一天一項 CSS 小技巧:打造視覺與互動效果30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言