HTML5動圖代碼是一種用于創建動態圖像的技術,它可以通過各種元素和屬性來創建交互式的動態視覺效果。以下是幾個常用的HTML5動圖代碼:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 50, 50);
ctx.fillStyle = "blue";
ctx.fillRect(100, 0, 50, 50);
</script>
上面的代碼使用canvas元素和2D上下文創建了一個矩形。ctx.fillStyle屬性用于設置矩形的填充顏色,ctx.fillRect()用于畫矩形。
<div id="box">
<img src="circle.png">
</div>
<style>
#box {
position: relative;
animation: myanimation 5s infinite;
}
@keyframes myanimation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
上面的代碼使用CSS3動畫為圖片添加了旋轉效果。animation屬性定義動畫名稱、持續時間和循環次數,@keyframes指定動畫的關鍵幀,transform屬性用于實現旋轉效果。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
上面的代碼使用video元素嵌入了一個視頻。controls屬性用于顯示瀏覽器自帶的視頻控制欄,source元素用于指定視頻文件的路徑和類型。