CSS3提供了許多縮放特效,可以讓網頁更加生動有趣。下面介紹幾個常用的縮放特效。
1. 縮放動畫
img:hover{ transform:scale(1.1); transition:all 0.5s ease-out; }
這段代碼表示鼠標懸停在圖片上時,圖片放大1.1倍,縮放過程有0.5秒的動畫效果。
2. 伸縮動畫
div{ transform:scaleX(2) scaleY(0.5); transition:all 0.5s ease-out; }
這段代碼表示將一個div元素在水平方向上放大2倍,在垂直方向上縮小一半,縮放過程有0.5秒的動畫效果。
3. 旋轉動畫
img:hover{ transform:rotate(45deg); transition:all 0.5s ease-in-out; }
這段代碼表示鼠標懸停在圖片上時,圖片以中心點順時針旋轉45度,縮放過程有0.5秒的動畫效果。
4. 翻轉動畫
button:hover{ transform:rotateY(180deg); transition:all 0.5s ease-in-out; }
這段代碼表示鼠標懸停在按鈕上時,按鈕以Y軸為中心水平翻轉180度,縮放過程有0.5秒的動畫效果。
CSS3的縮放特效可以為網頁增加動態效果,提升用戶體驗。以上代碼僅為常見的幾種效果,想要更多的縮放特效,可以去搜索相關文章。