荊軻刺秦王

有時候我們在靜態網頁中需要加一些動作，或者特效使我們的網頁效果看起來更生動

我們經常會看到有些網站的圖片是這樣的效果：

<style>

.img_box{width:200px;height:200px;overflow: hidden;}
.img{width:100%;transition: all 0.6s;}
.img:hover{transform: scale(1.2);}

</style>

<div class="img_box"><img src="https://img-blog.csdnimg.cn/20181105090020709.jpg" class="img"></div>
 

程式碼分析：
1、首先知道 div 和 img 的層次關係，img 是在 div 裡面，圖片放大後不應該超出 div 的盒子。
2、設定 div 的 overflow: hidden; 屬性，作用是圖片變大後超過 div 區域的部分會自動隱藏。
3、設定 transition: all 0.6s; 屬性和 transform: scale(1.2); 屬性，其中 transition: all 0.6s; 是變化速度，數值越小速度越快，而 transform: scale(1.2); 是變化範圍，  scale(1.2) 是放大1.2倍的意思。

擴充套件一：如果我們希望圖片不受限於 div 裡面  只需要把 div 的overflow: hidden; 屬性去掉就可以了。

擴充套件二：考慮到不同瀏覽器的相容性，可以將 img 的屬性改為：

-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;

-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-o-transform: scale(1.2);-ms-transform: scale(1.2);