HTML5是一種現代化的網頁制作語言，它不僅可以實現豐富的文本和圖形展示效果，還可以制作出各種炫酷的特效。下面就為大家介紹一些基于HTML5的圖片特效代碼。 首先，我們可以使用過渡效果來實現圖片的漸入漸出效果，代碼如下：

<style>
img{
opacity:0;
transition: opacity 1s linear;
}
img:hover{
opacity:1;
}
</style>
<img src="image.jpg" alt="圖片">

這段代碼可以在圖片上添加鼠標懸停事件，讓圖片逐漸顯示出來。transition屬性可以讓動態效果更加平滑。 其次，我們可以使用動畫效果來制作出更加炫酷的圖片特效。下面是一個簡單的翻轉動畫效果，代碼如下：

<style>
#image{
width:200px;
height:200px;
position:relative;
transform-style: preserve-3d;
transition: transform 1s ease-in-out;
}
#image:hover{
transform: rotateY(180deg);
}
#image img{
position:absolute;
width:100%;
height:100%;
backface-visibility: hidden;
}
</style>
<div id="image">
<img src="image-front.jpg" alt="正面">
<img src="image-back.jpg" alt="背面">
</div>

這段代碼可以讓圖片翻轉到背面，展示出另一張圖片。transform-style可以讓動畫效果更加真實，backface-visibility可以讓背面的圖片不可見。 最后，我們可以使用canvas技術來制作出一些更加豐富的圖片特效。下面是一個簡單的火焰效果，代碼如下：

<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
var W = canvas.width,
H = canvas.height;
function drawFlame(x, y, r, color){
ctx.beginPath();
var gradient = ctx.createRadialGradient(x, y, 0, x, y, r);
gradient.addColorStop(0, color);
gradient.addColorStop(1, "transparent");
ctx.fillStyle = gradient;
ctx.arc(x, y, r, 0, 2*Math.PI);
ctx.fill();
}
function loop(){
ctx.clearRect(0, 0, W, H);
drawFlame(W/2, H, 100, "#ff6600");
drawFlame(W/2+20, H-60, 60, "#ff9900");
drawFlame(W/2-10, H-120, 80, "#ff0000");
requestAnimationFrame(loop);
}
loop();
</script>

這段代碼可以制作出一個火焰效果。createRadialGradient函數可以制作出一個從內向外的漸變效果，再利用fillStyle進行填充。 以上就是一些基于HTML5的圖片特效代碼，希望能給大家的網頁制作帶來些許靈感。