HTML5動(dòng)圖代碼是一種用于創(chuàng)建動(dòng)態(tài)圖像的技術(shù),它可以通過(guò)各種元素和屬性來(lái)創(chuàng)建交互式的動(dòng)態(tài)視覺(jué)效果。以下是幾個(gè)常用的HTML5動(dòng)圖代碼:
<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上下文創(chuàng)建了一個(gè)矩形。ctx.fillStyle屬性用于設(shè)置矩形的填充顏色,ctx.fillRect()用于畫(huà)矩形。
<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動(dòng)畫(huà)為圖片添加了旋轉(zhuǎn)效果。animation屬性定義動(dòng)畫(huà)名稱(chēng)、持續(xù)時(shí)間和循環(huán)次數(shù),@keyframes指定動(dòng)畫(huà)的關(guān)鍵幀,transform屬性用于實(shí)現(xiàn)旋轉(zhuǎn)效果。
<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元素嵌入了一個(gè)視頻。controls屬性用于顯示瀏覽器自帶的視頻控制欄,source元素用于指定視頻文件的路徑和類(lèi)型。