HTML5＋CSS3實現圖片的放大、縮小

最近做項目時，經常遇到需要圖片緩慢放大的效果。我做的時候想到了幾種方法，所以來總結一下。

1、利用css改變圖片的寬高，做出視覺上的放大。

首先，將圖片寫入html頁面中，給定寬高。

箭頭所指向的就是我們需要變化的圖片。我們需要給定圖片父級盒子的寬高，如上圖。

Tips:

transition用於設置四個過渡屬性。

這四個屬性分別為：

這個屬性要設置在做動畫的元素上。就是「誰」做動畫，「誰」就需要設置過渡屬性。

設置圖片的寬高分別為100%，是為了讓圖片與父級盒子一樣大。這樣當盒子變大時，圖片不會出現偏移的現象。

以上準備工作完成後，我們就需要設置滑鼠移動後圖片父級盒子改變到的寬高。

這樣就可以實現滑鼠划過圖片變大的效果了。

當然，同樣也可以直接作用於圖片上，方法還是一樣的。

2、利用jQuery中的css()方法，改變圖片的大小。

同樣將圖片盒子給定寬高。

樣式與方法一相同。

然後我們利用css()方法來改變他的大小。

這樣就可以利用css()方法來改變他的寬高，從而做到圖片的放大效果。

3、利用jQuery中的animate()自定義動畫的方法，改變圖片的大小，實現放大的效果。

要利用這種方式，html與css跟之前是一樣的。

由於animate方法是自定義動畫方法，因此不需要過渡屬性來進行緩動。

此時，頁面上的圖片便會自動放大。

4、利用scale()方法，實現圖片放大的效果。

scale() 方法為畫布的當前變換矩陣添加一個縮放變換。縮放通過獨立的水平和垂直縮放因子來完成。圖片的變化是以中心為基準點來變化的。

這個方法同樣是通過樣式進行改變的。

結構和樣式不需要進行調整。

只需要給圖片盒子加一個transform: scale(1.2);即可 。數值表示放大/縮小的為原始的幾倍。（此時的過渡效果最好還是添加上，可以使圖片變化時感覺更加圓滑流暢）

5、利用css3的keyframe來創建動畫

Keyframe的定義和用法如下：

首先html結構還是一樣，css則需要進行改變。我們需要設定的是動畫後的值。

比如：

接下來我們要設定動畫中css樣式。我將動畫分成了5個階段。每個階段改變他寬高的1/5，連貫下來就會出現動畫的效果。

之所以寫多個，是因為瀏覽器並不完全之前keyframe，因此需要使用每個瀏覽器所支持的不同的寫法。

這是w3c上標明的對於瀏覽器的支持程度。

創建完動畫之後我們就可以直接引用了。只要使用animation就可以搞定了。

第一個值表示動畫的名稱，也就是我們所定義的動畫名稱。第二個值是完成動畫的時間。

給定完畢後，便能夠出現圖片放大的動畫效果了。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！