HTML5是一種新型的網站開發語言，在其中可以添加各種豐富的元素和動態效果，讓網站更加生動有趣。其中圖片動態效果也成為了一種很常見的特效，接下來我將會分享一些HTML5圖片動態效果的相關代碼。 首先，我們可以使用CSS3中的transform屬性，給圖片加上旋轉的效果。代碼如下：

img {
-webkit-transform: rotate(20deg); /* Safari */
-moz-transform: rotate(20deg); /* Firefox */
-ms-transform: rotate(20deg); /* IE */
-o-transform: rotate(20deg); /* Opera */
transform: rotate(20deg); /* Standard syntax */
}

此時，圖片就會自動旋轉20度，效果十分驚艷。 另外，我們也可以使用CSS3中的transition屬性和:hover偽類，讓鼠標懸浮時圖片產生一個縮放的效果。代碼如下：

img {
-webkit-transition: -webkit-transform .3s ease-in-out;
-moz-transition: -moz-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
}
img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

當鼠標懸浮到圖片上時，圖片就會自動縮放1.1倍，感覺十分動態。 還有一種常見的圖片動態效果是使用jQuery的animate()函數，制作一個圖片浮現的效果。代碼如下：

$(document).ready(function(){
$("img").animate({opacity: '1', marginTop: '0px'}, "slow");
});

此時，圖片會從頁面的下方慢慢浮現，直到完全顯示在頁面中間的位置，非常炫酷。 以上就是HTML5圖片動態效果的相關代碼分享，希望對網站開發愛好者有所幫助。