母亲节是表达爱意的好机会！小朋友可以亲手制作一个会"动"的电子贺卡，让妈妈看到你的编程小魔法！不需要复杂工具，只要按照步骤操作，就能做出一个充满爱心的网页：飘落的花瓣、闪烁的星星、会变祝福语的魔法卡片，点击屏幕还会有惊喜特效哦！这份特别的礼物，妈妈一定会感动又骄傲～
📝 制作步骤图解
第一步：新建文件
桌面右键 → 新建 → 文本文档
重命名为 mom-day.html (先创建.txt文件，稍后改扩展名)
第二步：输入魔法代码
右键用记事本打开文件
复制粘贴下方任一素材的代码 ⬇️
第三步：保存为网页格式
点击记事本菜单：文件 → 另存为
保存类型选择 “所有文件”
确保文件名是 mom-day.html（重要！）
💡 扩展名显示方法（Windows）：
- 文件资源管理器 → 顶部【查看】→ 勾选 ✔"文件扩展名"
第四步：打开魔法贺卡
保存的 mom-day.html 文件
双击文件，等待浏览器打开
点击屏幕任意位置触发特效 ✨
1. 素材一：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>母亲节快乐！</title>
<style>
body {
margin: 0;
height: 100vh;
overflow: hidden;
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #a18cd1);
font-family: 'Microsoft YaHei', sans-serif;
}
.container {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
color: #fff;
font-size: 3em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
margin-bottom: 30px;
animation: float 3s ease-in-out infinite;
}
.message-box {
background: rgba(255, 255, 255, 0.9);
padding: 30px 50px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
max-width: 600px;
text-align: center;
transition: transform 0.3s;
}
.message {
font-size: 1.2em;
color: #e91e63;
line-height: 1.6;
}
.heart {
position: absolute;
color: #ff4081;
animation: fall linear forwards;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">❤️ 母亲节快乐！ ❤️</h1>
<div class="message-box">
<p class="message" id="message">点击屏幕查看更多祝福</p>
</div>
</div>
<script>
// 祝福语数组
const messages = [
"感谢您不是超人，却为我变成了万能！",
"岁月不是偷走妈妈青春的神偷，我才是！",
"您陪我长大，我陪您慢慢变老～",
"世界上最美的称呼是——妈妈！",
"母爱是柴米油盐间的琐碎细腻❤️",
"妈妈的爱，藏在每一句唠叨里～",
"缓慢又笨拙的路上，谢谢您陪我长大！"
];
// 动态创建爱心
function createHeart() {
const heart = document.createElement('div');
heart.classList.add('heart');
heart.innerHTML = '❤';
heart.style.left = Math.random() * 100 + 'vw';
heart.style.animationDuration = Math.random() * 3 + 2 + 's';
heart.style.fontSize = Math.random() * 20 + 10 + 'px';
document.body.appendChild(heart);
// 动画结束后移除元素
setTimeout(() => {
heart.remove();
}, 5000);
}
// 点击事件处理
let index = 0;
document.addEventListener('click', () => {
// 更新祝福语
document.getElementById('message').textContent = messages[index];
index = (index + 1) % messages.length;
// 创建多个爱心
for(let i = 0; i < 5; i++) {
createHeart();
}
// 添加点击动画
document.querySelector('.message-box').style.transform = 'scale(1.05)';
setTimeout(() => {
document.querySelector('.message-box').style.transform = 'scale(1)';
}, 200);
});
// 自动创建爱心
setInterval(createHeart, 500);
</script>
</body>
</html>
2.素材二
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>母亲节特别祝福</title>
<style>
:root {
--primary-color: #ff69b4;
--secondary-color: #ff1493;
}
body {
margin: 0;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg,
#ffb6c1 0%,
#ff69b4 30%,
#ba55d3 70%,
#9370db 100%);
font-family: 'Microsoft YaHei', cursive;
}
.container {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
color: #fff;
font-size: 4em;
text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
margin: 20px;
animation: titleGlow 2s ease-in-out infinite;
}
.message-box {
background: rgba(255, 255, 255, 0.95);
padding: 40px 60px;
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
max-width: 700px;
text-align: center;
transition: all 0.3s;
backdrop-filter: blur(5px);
border: 2px solid var(--primary-color);
}
.message {
font-size: 1.5em;
color: var(--secondary-color);
line-height: 1.8;
margin: 15px 0;
}
/* 新增节日元素 */
.petal {
position: absolute;
pointer-events: none;
animation: petalFall linear forwards;
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
}
.balloon {
position: absolute;
animation: balloonRise linear forwards;
transition: transform 0.3s;
}
.sparkle {
position: absolute;
width: 8px;
height: 8px;
background: gold;
border-radius: 50%;
animation: sparkleTwinkle 1.5s infinite;
}
@keyframes titleGlow {
0%, 100% {
transform: scale(1);
text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
}
50% {
transform: scale(1.05);
text-shadow: 0 0 20px rgba(255,255,255,0.8);
}
}
@keyframes petalFall {
0% { transform: translateY(-10vh) rotate(0deg); }
100% { transform: translateY(110vh) rotate(720deg); }
}
@keyframes balloonRise {
0% { transform: translateY(110vh) scale(0.8); }
100% { transform: translateY(-50vh) scale(1.2); }
}
@keyframes sparkleTwinkle {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.5); }
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">🌸 母亲节快乐 🌸</h1>
<div class="message-box">
<p class="message" id="message">点击屏幕接收祝福惊喜</p>
</div>
</div>
<script>
// 扩展祝福语库
const messages = [
"🌺 妈妈是世界上最温暖的词语 🌺",
"💐 您的爱是我永远的避风港 💐",
"🌸 时光请慢些走，让我多陪陪您 🌸",
"🌷 洗衣做饭的日常，藏着最深的爱 🌷",
"🌹 您把青春给了我，把岁月留给自己 🌹",
"🌻 世间美好不及您温柔一笑 🌻",
"🌼 母爱是永不褪色的岁月童话 🌼"
];
// 创建节日元素
function createElement(type) {
const element = document.createElement('div');
switch(type) {
case 'petal':
element.classList.add('petal');
element.innerHTML = ['🌸','💮','🌺','🌷','🌼'][Math.floor(Math.random()*5)];
element.style.left = Math.random() * 100 + 'vw';
element.style.fontSize = Math.random() * 24 + 16 + 'px';
element.style.animationDuration = Math.random() * 5 + 8 + 's';
break;
case 'balloon':
element.classList.add('balloon');
element.innerHTML = '🎈';
element.style.left = Math.random() * 100 + 'vw';
element.style.fontSize = Math.random() * 40 + 30 + 'px';
element.style.color = `hsl(${Math.random()*360}, 70%, 60%)`;
element.style.animationDuration = Math.random() * 8 + 10 + 's';
break;
case 'sparkle':
element.classList.add('sparkle');
element.style.left = Math.random() * 100 + 'vw';
element.style.top = Math.random() * 100 + 'vh';
break;
}
document.body.appendChild(element);
setTimeout(() => element.remove(), 15000);
}
// 点击互动
let msgIndex = 0;
document.addEventListener('click', () => {
// 更新祝福语
const msgElement = document.getElementById('message');
msgElement.style.animation = 'none';
msgElement.offsetHeight; // 触发重绘
msgElement.style.animation = 'messagePop 0.5s';
msgElement.textContent = messages[msgIndex];
msgIndex = (msgIndex + 1) % messages.length;
// 生成特效
for(let i=0; i<8; i++) createElement('petal');
for(let i=0; i<3; i++) createElement('balloon');
// 卡片动画
document.querySelector('.message-box').style.transform = 'rotate(-2deg) scale(1.05)';
setTimeout(() => {
document.querySelector('.message-box').style.transform = 'rotate(0) scale(1)';
}, 300);
});
// 自动生成特效
setInterval(() => {
createElement('petal');
if(Math.random() > 0.8) createElement('balloon');
if(Math.random() > 0.9) createElement('sparkle');
}, 1000);
// 初始化闪烁星星
for(let i=0; i<20; i++) createElement('sparkle');
</script>
</body>
</html>
···html
<!-- Hearts -->
<div id="hearts-container"></div>
<header>
<h1>Happy Mother's Day</h1>
<div class="subtitle">母亲节快乐 · 卓阳送给妈妈的祝福</div>
<div class="floral-border"></div>
</header>
<div class="card">
<div class="message-box" id="messageTrigger">
<i class="fas fa-hand-pointer" style="font-size: 2rem; color: var(--secondary); margin-bottom: 1rem;"></i>
<p style="font-size: 1.5rem;">点击这里查看给妈妈的祝福</p>
<div class="hidden-message" id="hiddenMessage">
<p>亲爱的妈妈：</p>
<p>感谢您无条件的爱与支持，您是我生命中最温暖的阳光。</p>
<p>愿您永远健康快乐，笑容如花般绽放。</p>
<p>愿您永驻青春，</p>
<p>您的卓阳.</p>
</div>
</div>
</div>
<div class="floral-border"></div>
<footer>
<p>© 2025 Mother's Day Celebration | Avec amour</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Create balloons
const balloonsContainer = document.getElementById('balloons-container');
const colors = ['#ff7eb9', '#ff65a3', '#7afcff', '#feff9c', '#fff740'];
for (let i = 0; i < 15; i++) {
const balloon = document.createElement('div');
balloon.className = 'balloon';
balloon.style.left = Math.random() * 100 + 'vw';
balloon.style.background = colors[Math.floor(Math.random() * colors.length)];
balloon.style.animationDuration = (6 + Math.random() * 7) + 's';
balloon.style.animationDelay = Math.random() * 5 + 's';
balloonsContainer.appendChild(balloon);
}
// Create floating hearts
const heartsContainer = document.getElementById('hearts-container');
for (let i = 0; i < 10; i++) {
const heart = document.createElement('div');
heart.className = 'heart';
heart.innerHTML = '❤️';
heart.style.left = Math.random() * 100 + 'vw';
heart.style.top = Math.random() * 100 + 'vh';
heart.style.animationDelay = Math.random() * 2 + 's';
heart.style.fontSize = (1 + Math.random() * 1.5) + 'rem';
heartsContainer.appendChild(heart);
}
// Message reveal
const messageTrigger = document.getElementById('messageTrigger');
const hiddenMessage = document.getElementById('hiddenMessage');
messageTrigger.addEventListener('click', function() {
if (hiddenMessage.style.display === 'block') {
hiddenMessage.style.display = 'none';
} else {
hiddenMessage.style.display = 'block';
// Create burst effect
for (let i = 0; i < 10; i++) {
const burstHeart = document.createElement('div');
burstHeart.className = 'heart';
burstHeart.innerHTML = '❤️';
burstHeart.style.position = 'absolute';
burstHeart.style.left = '50%';
burstHeart.style.top = '50%';
burstHeart.style.transform = 'translate(-50%, -50%)';
burstHeart.style.fontSize = (1 + Math.random() * 2) + 'rem';
burstHeart.style.animation = `fly-away ${1 + Math.random()}s ease-out forwards`;
const angle = Math.random() * Math.PI * 2;
const distance = 50 + Math.random() * 100;
burstHeart.style.setProperty('--end-x', Math.cos(angle) * distance + 'px');
burstHeart.style.setProperty('--end-y', Math.sin(angle) * distance + 'px');
document.body.appendChild(burstHeart);
setTimeout(() => {
burstHeart.remove();
}, 1000);
}
}
});
// Add burst animation
const style = document.createElement('style');
style.textContent = `
@keyframes fly-away {
to {
transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y)));
opacity: 0;
}
}
`;
document.head.appendChild(style);
});
</script>