元旦到了，我們來制作一張HTML5的賀卡送給親朋好友吧！
首先，我們來編寫HTML的代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元旦快樂！</title> </head> <body> <div> <h1>祝福</h1> <p>親愛的朋友，元旦快樂！</p> <p>感謝一路有你的陪伴，祝你在新的一年里，萬事如意，健康快樂！</p> </div> <div> <h2>賀卡效果</h2> <canvas id="myCanvas"></canvas> </div> <script> // 這里是賀卡效果的JavaScript代碼 </script> </body> </html>
以上是一個基礎的HTML頁面，我們在其中添加了兩個div容器，其中一個用于放置祝福語，另一個用于放置賀卡效果。
接下來，我們來寫賀卡效果的JavaScript代碼：
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
document.addEventListener('mousemove', function(e){
const x = e.clientX;
const y = e.clientY;
const particle = new Particle(x, y);
particle.draw(context);
});
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = Math.random() * 20 + 10;
this.color = 'rgba(255, 255, 255, 0.8)';
}
draw(context) {
context.beginPath();
context.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
context.fillStyle = this.color;
context.fill();
}
}以上是一個簡單的小型粒子特效，當鼠標移動時，會在鼠標位置出現一個大小和顏色隨機的圓形。
最后，我們來給賀卡加上一些CSS樣式：
body {
background-color: #E5EBF0;
font-family: Arial, sans-serif;
color: #2D2D2D;
text-align: center;
}
div {
margin-top: 30px;
padding: 20px;
}
h1 {
font-size: 60px;
margin-bottom: 10px;
}
h2 {
font-size: 40px;
margin-bottom: 20px;
}
canvas {
width: 100%;
height: 300px;
}以上是一個簡單的CSS樣式表，其中設置了背景色、字體、顏色、對齊方式等等，還有賀卡畫布的高度和寬度。
現在，一張美觀、有趣的HTML5元旦賀卡就完成了，趕快制作并發送給你的親朋好友，祝福他們在新的一年里快樂健康！
上一篇html5免費代碼網站
下一篇html5免費的源代碼