1、實(shí)現(xiàn)效果
當(dāng)鼠標(biāo)經(jīng)過圖片，圖片會逐漸放大，仿佛你距離圖片越來越近,常在旅游、商品的展示頁面應(yīng)用。
2、實(shí)現(xiàn)思路
（1）使用 scale 函數(shù)放大圖片
（2）使用transition實(shí)現(xiàn)逐漸變化的動畫。
（3）使用 overflow: hidden; 控制圖片在圖片外圍盒子中。
3、源代碼
素材：
圖片一張
bl.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS實(shí)戰(zhàn)-鼠標(biāo)經(jīng)過動畫</title>
<style type="text/css">
.photo {
overflow: hidden;
position: relative;
width:290px;
height:376px;
float:left;
}
.photo img{
width:100%;
height:auto;
}
.photo:hover img{
-webkit-transform:scale(1.15);
-moz-transform:scale(1.15);
-o-transform:scale(1.15);
transform:scale(1.15);
-webkit-transition:all 2s ease;
-moz-transition:all 2s ease;
-o-transition:all 2s ease;
transition:all 2s ease;
}
</style>
</head>
<body>
<div class="photo">
<!--博客bug，需要調(diào)整下面一行代碼-->
< img src="bl.jpg " border="0" >
</div>
</body>
</html>
