桂露凝香入九陔红旗漫卷劲风来。 冰轮皎皎悬霄汉彩帜翩翩绕玉台。 四海笙歌贺华诞万家灯火庆团圆。 曾经岁月风霜砺今日山河锦绣繁。 百业兴隆开胜境千乡富庶乐黎元。 人逢佳节心同悦国遇昌时梦共圆。 且把清樽酬盛世长留浩气壮坤乾。1.提示词通过豆包创建的完成方法步骤返回代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title喜迎中秋·国庆十天长假/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; /* 紫色系渐变背景 */ background: linear-gradient(135deg, #240046, #5a189a, #7b2cbf, #9d4edd); font-family: Microsoft Yahei, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; overflow: hidden; position: relative; } /* 烟花画布铺满全屏置于底层 */ #fireworkCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .container { text-align: center; padding: 30px 20px; z-index: 2; position: relative; } .title { font-size: 3rem; margin-bottom: 20px; text-shadow: 0 0 18px rgba(200,160,255,0.7); animation: bounce 2s infinite ease-in-out; } .sub-title { font-size: 1.4rem; margin-bottom: 40px; opacity: 0.95; } .count-box { background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); border-radius: 20px; padding: 35px 50px; border: 1px solid rgba(220,180,255,0.35); cursor: pointer; user-select: none; transition: transform 0.2s; box-shadow: 0 0 30px rgba(157, 78, 221, 0.3); } .count-box:active { transform: scale(0.96); } .count-text { font-size: 2.2rem; margin-bottom:12px; } .time-show { font-size: 4rem; font-weight: bold; letter-spacing:4px; text-shadow: 0 0 12px rgba(220,180,255,0.6); } .tip { margin-top:20px; font-size:1rem; opacity:0.8; } /* 点击粒子特效 */ .particle{ position:absolute; pointer-events:none; border-radius:50%; animation: fly 0.8s ease-out forwards; z-index:10; } keyframes bounce { 0%,100% {transform: translateY(0);} 50% {transform: translateY(-10px);} } keyframes fly { 0%{opacity:1; transform:translate(0,0) scale(1);} 100%{opacity:0; transform:translate(var(--tx),var(--ty)) scale(0);} } /* 移动端适配 */ media(max-width:768px){ .title{ font-size:1.8rem; } .sub-title{ font-size:1.1rem; } .count-text{ font-size:1.4rem; } .time-show{ font-size:2rem; letter-spacing:2px; } .count-box{ padding:25px 20px; } } /style /head body !-- 背景烟花画布 -- canvas idfireworkCanvas/canvas div classcontainer h1 classtitle喜迎中秋国庆十天假期/h1 p classsub-title满心期待快乐长假马上就要来啦点击页面释放欢乐✨/p div classcount-box idcountWrap div classcount-text距离快乐双节假期还剩/div div classtime-show idtimeDom/div div classtip点击任意位置炸开彩色粒子/div /div /div script // 2026年10月1日零点假期开始 const holidayStart new Date(2026-10-01 00:00:00).getTime(); const timeDom document.getElementById(timeDom); // 倒计时计算 function updateCount(){ const now Date.now(); const diff holidayStart - now; if(diff 0){ timeDom.innerText 十天假期开启尽情玩耍; return; } const d Math.floor(diff/(1000*60*60*24)); const h Math.floor((diff%(1000*60*60*24))/(1000*60*60)); const m Math.floor((diff%(1000*60*60))/(1000*60)); const s Math.floor((diff%(1000*60))/1000); timeDom.innerText ${d}天 ${h}时 ${m}分 ${s}秒; } setInterval(updateCount,1000); updateCount(); // 点击粒子爆炸特效 document.body.addEventListener(click,function(e){ const colors [#e0aaff,#c77dff,#9d4edd,#7b2cbf,#ffffff,#ffd7ff]; for(let i0;i30;i){ const p document.createElement(div); p.classList.add(particle); const size Math.random()*124; p.style.width sizepx; p.style.height sizepx; p.style.background colors[Math.floor(Math.random()*colors.length)]; p.style.left e.clientX px; p.style.top e.clientY px; p.style.setProperty(--tx,(Math.random()-0.5)*220px); p.style.setProperty(--ty,(Math.random()-0.5)*220px); document.body.appendChild(p); setTimeout(()p.remove(),800); } }) // 背景Canvas烟花炸开特效 const canvas document.getElementById(fireworkCanvas); const ctx canvas.getContext(2d); let w, h; let fireworks []; let particles []; function resize(){ w canvas.width window.innerWidth; h canvas.height window.innerHeight; } resize(); window.addEventListener(resize,resize); // 烟花对象 class Firework { constructor(){ this.x Math.random()*w; this.y h; this.targetY Math.random() * h * 0.4; this.speed Math.random()*2.5 2; this.color hsl(${270 Math.random()*40},85%,70%); this.exploded false; } update(){ if(!this.exploded){ this.y - this.speed; if(this.y this.targetY){ this.exploded true; // 爆炸生成粒子 for(let i0;i80;i){ particles.push(new Particle(this.x,this.y,this.color)); } } } } draw(){ if(!this.exploded){ ctx.beginPath(); ctx.arc(this.x,this.y,3,0,Math.PI*2); ctx.fillStyle this.color; ctx.fill(); } } } class Particle { constructor(x,y,color){ this.x x; this.y y; this.color color; const angle Math.random()*Math.PI*2; const speed Math.random()*4 1; this.vx Math.cos(angle)*speed; this.vy Math.sin(angle)*speed; this.alpha 1; this.decay Math.random()*0.015 0.01; } update(){ this.x this.vx; this.y this.vy; this.vy 0.05; this.alpha - this.decay; } draw(){ ctx.save(); ctx.globalAlpha this.alpha; ctx.beginPath(); ctx.arc(this.x,this.y,2,0,Math.PI*2); ctx.fillStyle this.color; ctx.fill(); ctx.restore(); } } function loop(){ ctx.fillStyle rgba(0,0,0,0.15); ctx.fillRect(0,0,w,h); // 随机生成烟花 if(Math.random() 0.03){ fireworks.push(new Firework()); } for(let i fireworks.length-1;i0;i--){ fireworks[i].update(); fireworks[i].draw(); if(fireworks[i].exploded){ fireworks.splice(i,1); } } for(let i particles.length-1;i0;i--){ particles[i].update(); particles[i].draw(); if(particles[i].alpha 0){ particles.splice(i,1); } } requestAnimationFrame(loop); } loop(); /script /body /html2.展示代码效果创建文本文档显示文件扩展名添加代码内容——通过记事本打开注一定要保存代码CtrlS访问效果 
长河君 · 2026/9/5 3:28:01 · 阅读 1.2k 喜迎中秋+国庆十天假期——表达我开心的心情--html表达
桂露凝香入九陔红旗漫卷劲风来。 冰轮皎皎悬霄汉彩帜翩翩绕玉台。 四海笙歌贺华诞万家灯火庆团圆。 曾经岁月风霜砺今日山河锦绣繁。 百业兴隆开胜境千乡富庶乐黎元。 人逢佳节心同悦国遇昌时梦共圆。 且把清樽酬盛世长留浩气壮坤乾。1.提示词通过豆包创建的完成方法步骤返回代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title喜迎中秋·国庆十天长假/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; /* 紫色系渐变背景 */ background: linear-gradient(135deg, #240046, #5a189a, #7b2cbf, #9d4edd); font-family: Microsoft Yahei, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; overflow: hidden; position: relative; } /* 烟花画布铺满全屏置于底层 */ #fireworkCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .container { text-align: center; padding: 30px 20px; z-index: 2; position: relative; } .title { font-size: 3rem; margin-bottom: 20px; text-shadow: 0 0 18px rgba(200,160,255,0.7); animation: bounce 2s infinite ease-in-out; } .sub-title { font-size: 1.4rem; margin-bottom: 40px; opacity: 0.95; } .count-box { background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); border-radius: 20px; padding: 35px 50px; border: 1px solid rgba(220,180,255,0.35); cursor: pointer; user-select: none; transition: transform 0.2s; box-shadow: 0 0 30px rgba(157, 78, 221, 0.3); } .count-box:active { transform: scale(0.96); } .count-text { font-size: 2.2rem; margin-bottom:12px; } .time-show { font-size: 4rem; font-weight: bold; letter-spacing:4px; text-shadow: 0 0 12px rgba(220,180,255,0.6); } .tip { margin-top:20px; font-size:1rem; opacity:0.8; } /* 点击粒子特效 */ .particle{ position:absolute; pointer-events:none; border-radius:50%; animation: fly 0.8s ease-out forwards; z-index:10; } keyframes bounce { 0%,100% {transform: translateY(0);} 50% {transform: translateY(-10px);} } keyframes fly { 0%{opacity:1; transform:translate(0,0) scale(1);} 100%{opacity:0; transform:translate(var(--tx),var(--ty)) scale(0);} } /* 移动端适配 */ media(max-width:768px){ .title{ font-size:1.8rem; } .sub-title{ font-size:1.1rem; } .count-text{ font-size:1.4rem; } .time-show{ font-size:2rem; letter-spacing:2px; } .count-box{ padding:25px 20px; } } /style /head body !-- 背景烟花画布 -- canvas idfireworkCanvas/canvas div classcontainer h1 classtitle喜迎中秋国庆十天假期/h1 p classsub-title满心期待快乐长假马上就要来啦点击页面释放欢乐✨/p div classcount-box idcountWrap div classcount-text距离快乐双节假期还剩/div div classtime-show idtimeDom/div div classtip点击任意位置炸开彩色粒子/div /div /div script // 2026年10月1日零点假期开始 const holidayStart new Date(2026-10-01 00:00:00).getTime(); const timeDom document.getElementById(timeDom); // 倒计时计算 function updateCount(){ const now Date.now(); const diff holidayStart - now; if(diff 0){ timeDom.innerText 十天假期开启尽情玩耍; return; } const d Math.floor(diff/(1000*60*60*24)); const h Math.floor((diff%(1000*60*60*24))/(1000*60*60)); const m Math.floor((diff%(1000*60*60))/(1000*60)); const s Math.floor((diff%(1000*60))/1000); timeDom.innerText ${d}天 ${h}时 ${m}分 ${s}秒; } setInterval(updateCount,1000); updateCount(); // 点击粒子爆炸特效 document.body.addEventListener(click,function(e){ const colors [#e0aaff,#c77dff,#9d4edd,#7b2cbf,#ffffff,#ffd7ff]; for(let i0;i30;i){ const p document.createElement(div); p.classList.add(particle); const size Math.random()*124; p.style.width sizepx; p.style.height sizepx; p.style.background colors[Math.floor(Math.random()*colors.length)]; p.style.left e.clientX px; p.style.top e.clientY px; p.style.setProperty(--tx,(Math.random()-0.5)*220px); p.style.setProperty(--ty,(Math.random()-0.5)*220px); document.body.appendChild(p); setTimeout(()p.remove(),800); } }) // 背景Canvas烟花炸开特效 const canvas document.getElementById(fireworkCanvas); const ctx canvas.getContext(2d); let w, h; let fireworks []; let particles []; function resize(){ w canvas.width window.innerWidth; h canvas.height window.innerHeight; } resize(); window.addEventListener(resize,resize); // 烟花对象 class Firework { constructor(){ this.x Math.random()*w; this.y h; this.targetY Math.random() * h * 0.4; this.speed Math.random()*2.5 2; this.color hsl(${270 Math.random()*40},85%,70%); this.exploded false; } update(){ if(!this.exploded){ this.y - this.speed; if(this.y this.targetY){ this.exploded true; // 爆炸生成粒子 for(let i0;i80;i){ particles.push(new Particle(this.x,this.y,this.color)); } } } } draw(){ if(!this.exploded){ ctx.beginPath(); ctx.arc(this.x,this.y,3,0,Math.PI*2); ctx.fillStyle this.color; ctx.fill(); } } } class Particle { constructor(x,y,color){ this.x x; this.y y; this.color color; const angle Math.random()*Math.PI*2; const speed Math.random()*4 1; this.vx Math.cos(angle)*speed; this.vy Math.sin(angle)*speed; this.alpha 1; this.decay Math.random()*0.015 0.01; } update(){ this.x this.vx; this.y this.vy; this.vy 0.05; this.alpha - this.decay; } draw(){ ctx.save(); ctx.globalAlpha this.alpha; ctx.beginPath(); ctx.arc(this.x,this.y,2,0,Math.PI*2); ctx.fillStyle this.color; ctx.fill(); ctx.restore(); } } function loop(){ ctx.fillStyle rgba(0,0,0,0.15); ctx.fillRect(0,0,w,h); // 随机生成烟花 if(Math.random() 0.03){ fireworks.push(new Firework()); } for(let i fireworks.length-1;i0;i--){ fireworks[i].update(); fireworks[i].draw(); if(fireworks[i].exploded){ fireworks.splice(i,1); } } for(let i particles.length-1;i0;i--){ particles[i].update(); particles[i].draw(); if(particles[i].alpha 0){ particles.splice(i,1); } } requestAnimationFrame(loop); } loop(); /script /body /html2.展示代码效果创建文本文档显示文件扩展名添加代码内容——通过记事本打开注一定要保存代码CtrlS访问效果