為網站圖片添加漸變動畫效果

一、使用CSS3實現漸變動畫

CSS3中提供了gradient（漸變）屬性，可以幫助我們實現圖片漸變動畫效果。下面是一個示例代碼：

.box{
    width: 300px;
    height: 300px;
    background: 
        /* 漸變顏色開始 */
        linear-gradient(to right, #f00, #0f0) 
        /* 漸變顏色結束，這裡的百分比可以控制從何處開始變化 */
        50% 50% / 0 0 no-repeat;
    transition: background-size 0.5s ease; /* 動畫效果，可以自行調整屬性值 */
}

.box:hover{
    background-size: 100% 100%; /* 改變背景大小，使漸變生效 */
}

這段代碼中，我們使用了linear-gradient屬性來實現漸變效果，to right表示從左到右，#f00表示開始顏色紅色，#0f0表示結束顏色綠色。50% 50%控制從哪個位置開始變化，0 0表示漸變效果的大小為0，no-repeat表示不重複漸變。transition屬性用於指定動畫時間及動畫效果。

二、使用JavaScript實現圖片漸變動畫

除了CSS3，我們還可以使用JavaScript來實現圖片漸變效果，這裡我們以jQuery庫為例：

$('img').mouseenter(function(){
    $(this).animate({opacity:0},500,function(){
        $(this).css('background','-webkit-gradient(linear, left top, right top, from(#f00), to(#0f0))');
        $(this).animate({opacity:1},500);
    });
});

這段代碼中，我們定義鼠標進入img元素的事件，調用jQuery的animate方法實現圖片漸變消失的效果，再使用css方法添加漸變背景色，並在動畫結束後調用animate方法實現圖片重新顯示的效果。

三、使用Canvas實現圖片漸變動畫

在Canvas中，我們可以使用createRadialGradient或createLinearGradient方法實現圖片漸變效果，接下來是一個Canvas代碼示例：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('img');

var gradient = context.createLinearGradient(0,0,300,0); //創建線性漸變
gradient.addColorStop(0, '#f00'); //開始顏色
gradient.addColorStop(1, '#0f0'); //結束顏色
context.fillStyle = gradient; //將漸變放入填充模式中
context.drawImage(img, 0, 0); //繪製圖片

$('canvas').mouseenter(function(){
    context.clearRect(0,0,300,300); //清空畫布
    context.save(); //保存當前狀態
    context.scale(1.1,1.1); //放大畫布
    context.drawImage(img, 0, 0); //重新繪製圖片
    context.restore(); //恢復狀態

    context.beginPath();
    context.rect(0,0,300,300); //繪製矩形框
    context.fill(); //填充
});

這段代碼中，我們創建了一個線性漸變，設置了開始顏色和結束顏色，將漸變放入填充模式中，並使用drawImage方法繪製圖片。在鼠標進入canvas元素的事件中，我們清空畫布，放大畫布，重新繪製圖片，繪製一個矩形框並填充漸變色，實現了漸變動畫效果。