母亲节祝福网页制作
母亲节是表达爱意的好机会！小朋友可以亲手制作一个会"动"的电子贺卡，让妈妈看到你的编程小魔法！不需要复杂工具，只要按照步骤操作，就能做出一个充满爱心的网页：飘落的花瓣、闪烁的星星、会变祝福语的魔法卡片，点击屏幕还会有惊喜特效哦！这份特别的礼物，妈妈一定会感动又骄傲～
📝 制作步骤图解
第一步：新建文件
桌面右键 → 新建 → 文本文档
重命名为 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>