網頁設計實驗室

Web Design Laboratory

使用CSS實現滑鼠滑過圖片時,圖片自動擴增效果

Dec 16, 2024

↓程式碼演示在文章底部↓

transform

使用translate來控制元素的移動
如果只想要控制單一方向,可以使用translateX(x)、translateY(y)、translateZ(z)
合併的寫法translate(x,y)ortranslate3d(x,y,z)

hover

hover是游標移上去的時候會發生的事情

scale

scale是拿來讓區塊縮放,同樣可以只設定一個方向。
scaleX(x)、scaleY(y)、scaleZ(z),大於1代表放大;小於1代表縮小。
合在一起的寫法scale(x,y)或scale3d(x,y,z)。

看起來像這樣

是可以崁入到網頁上的,也可以直接做線上編輯。

See the Pen Untitled by 周平(瑪雅網路科技) (@vzhzchpn-the-vuer) on CodePen.


CodePen 官網: https://codepen.io/