iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0

文章同步更新在 CodeFictionist

今天這個特效是我週末滑 IG 看到 This.Web 在介紹文字跳約起來的特效,剛好我因為拿掉幾篇實作起來跟前面幾天很相似的主題正苦無替代,所以決定也練練如何讓文字「跳」起來。
啊不過 This.Web 在 IG 提供的範例真的太酷炫 ,還有用到一些 JavaScript,我這邊就只是好奇稍微摸摸,著重在 CSS 部分而已。
那我是這樣想的,This.Web 的文字跳躍其實是有壓縮 + 彈起的感覺,我們今天先來玩壓縮,明天再來玩彈起。

壓縮文字效果

其實文字壓下去的感覺本質上也是透過 transform 來達成,透過 scale 將文字從 Y 軸縮小但從 X 軸稍微放大就會讓文字看起來有點被壓扁的感覺。

<div class="squish-text">
 <span>壓</span>
 <span>縮</span>
 <span>彈</span>
 <span>性</span>
 <span>效</span>
 <span>果</span>
</div>
/* 一樣省略其它雜七雜八的設定 */
.squish-text span {
 transition: transform 0.5s cubic-bezier(0.25, 1.5, 0.5, 1);
}

.squish-text span:hover {
 transform: scale(1.2, 0.8); /* 水平方向放大,垂直方向壓縮 */
}

壓縮文字

範例 - 壓縮文字效果

嗯,大概就是這樣,transform 真好用。

結語

今天的結語不是廢話,是剛好 This.Web 在這篇 IG 貼文的後面有一段話我覺得很有道理,也是我鐵人賽連續寫 15 天 CSS 的心情:

很多看起來很炫的效果原理其實很簡單,重點反而是你的想像力


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

尚未有邦友留言

立即登入留言