HTML5情人節動畫代碼
<!DOCTYPE html>
<html>
<head>
<title>情人節動畫</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var i=0;
var img=new Image();
img.onload=function(){
ctx.drawImage(img,0,0);
setInterval(drawHeart,10);
};
img.src="heart.jpg";
function drawHeart(){
i++;
ctx.clearRect(0,0,c.width,c.height);
var x=c.width/2-50*Math.pow(Math.sin(i/10),3);
var y=c.height/2-40*(Math.cos(i/10)-Math.cos(2*i/10))/2;
ctx.drawImage(img,x,y);
var heart=document.createElement("div");
heart.style.position="absolute";
heart.style.left=x+"px";
heart.style.top=y+"px";
heart.style.width="20px";
heart.style.height="20px";
heart.style.background="red";
heart.style.borderRadius="10px";
heart.style.transform="rotate("+i/5+"deg)";
document.body.appendChild(heart);
if(i==100){
clearInterval();
}
}
</script>
</body>
</html>以上是一段簡單的HTML5情人節動畫代碼，主要實現了一個心形圖案的繪制和心形圖案的動畫效果。代碼中使用了Canvas和JS技術進行圖像繪制和動態效果實現，同時通過DOM技術實現了心形圖案的渲染。該動畫效果簡單、精美，適合情人節等浪漫場合展示。
下一篇html5懸浮按鈕代碼