CSS3的動畫效果為頁面添加了美觀和互動性。其中Canvas元素是Web開發中一個非常重要的元素, 它可以在網頁上通過JavaScript進行圖形交互繪制。Canvas的繪圖API是HTML5的一部分, 可以用于動態繪制圖形、動畫和游戲等。下面就來看看如何使用CSS3和Canvas制作動態效果。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d'); 
function drawCircle(){
var radius = 20;
var x = canvas.width / 2;
var y = canvas.height / 2;
var startAngle = 0;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.fillStyle = "red";
context.fill();
}
function animate(){
context.clearRect(0, 0, canvas.width, canvas.height);
drawCircle();
window.requestAnimationFrame(animate);
}
animate();

在上面的代碼中，我們取得了一個Canvas元素和它的2D上下文。接著我們定義了兩個函數drawCircle和animate。在drawCircle函數中，我們使用了Canvas的API畫了一個固定位置的圓。然后在animate函數中，我們通過context.clearRect()清除原來繪制的內容，再重新調用drawCircle函數畫圓。由于window.requestAnimationFrame()方法每秒執行60次，所以動畫效果非常流暢。

除此之外，CSS3中的transition屬性和animation屬性也可以制作簡單的動態效果。下面看看一個通過動畫實現圓形變長的例子：

.circle{
width: 100%;
height: 100px;
background: red;
border-radius: 50%;
transition: all 0.3s linear;
}
.circle:hover{
height: 300px;
}

在上面的代碼中，我們定義了一個.circle類。一開始這個類的高度是100px，通過CSS3的transition屬性，設置了當鼠標位于其上面時，高度在0.3秒內變成300px，從而形成了一個動態效果。