我們?yōu)g覽網頁時，經?？梢钥吹揭粋€效果，當我們把鼠標滑過一張圖片或一個區(qū)域時，圖片會放大或縮小，高亮顯示這效果。其實這個效果并不難實現，那么這篇文章 W3Cschool 小編就來教你 CSS 如何設置圖片放大效果。
具體效果
思路：圖片放大的動畫效果還是由?transition?和?transform?實現。先設置 div 的初始位置，過渡的時間等，之后設置 translate，scale，rotate 等屬性。
translate：代表水平和垂直的移動；
scale：代表水平和垂直同時縮放；
rotate：表示旋轉的角度。
具體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS圖片放大 - 編程獅(w3cschool.cn)</title>
<style>
div {
width: 200px;
height: 100px;
transition: all .3s;
}
div:hover {
transform: translate(100px, 100px) scale(2) rotate(0deg);
}
</style>
</head>
<body>
<div>
<img src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" alt="w3cschool">
</div>
</body>
</html>
以上就是 CSS 如何實現圖片放大效果的全部內容。更多 CSS 相關教程請關注 W3Cschool 官網。
相關 CSS 效果：CSS如何設置圖片旋轉、CSS如何實現陰影效果
