利用CSS3實現鼠標懸停在圖片上圖片緩慢縮放的兩種方法

1.改變background-size屬性

   將圖片作為某個html元素的背景圖片，用transition屬性改變圖片的大小。

.container{
    background-size: 100% 100%;
    transition: all 2s;    
}
.container:hover{
    background-size: 120% 120%;
}

這種方法有個問題是圖片縮放的時候會出現抖動的現象

 

2.利用scale

   使用img標簽，並在img標簽上添加transform屬性改變scale值

img{
   transition: all 2s;
}
img:hover{
   transform: scale(1.2);  
}

這種方法能夠獲得比較平滑的縮放效果