举国欢庆的国庆如约而至作为大学生暂别书桌伏案的日常。抛开学习的琐碎带着满心欢喜感受金秋与节日碰撞出来的无限欢愉。通过豆包创建的完成方法步骤1.提示词喜迎中秋 国庆共 10 天假期 —— 表达我的开心 - html 表达 返回代码需要显示倒计时增强互动点击的时候页要有特效返回代码!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: radial-gradient(circle at 20% 10%, #ffd6e2 0%, #ffb8cc 40%, #ffa8bf 100%); font-family: Microsoft Yahei, system-ui; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #992b55; } /* 背景光晕呼吸 */ body::before{ content:; position:fixed; top:0;left:0; width:100%;height:100%; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.3), transparent 55%); animation: bgBreath 7s ease-in-out infinite alternate; z-index:-1; } keyframes bgBreath { from{opacity:0.6;} to{opacity:1;} } .wrap{ text-align:center; z-index:2; padding:20px; max-width:700px; } h1{ font-size: clamp(2rem,5vw,3.2rem); background: linear-gradient(90deg,#d13b6f,#ff6b9b); -webkit-background-clip:text; color:transparent; margin-bottom:16px; animation: floatUp 2.2s ease infinite alternate; } .desc{ font-size: clamp(1rem,2vw,1.4rem); margin-bottom:32px; opacity:0.85; } /* 玻璃倒计时卡片 修复渲染问题 */ .count-card{ backdrop-filter: blur(14px); background:rgba(255,255,255,0.42); border:1px solid rgba(255,255,255,0.7); box-shadow: 0 8px 32px rgba(200,40,90,0.18); border-radius:24px; padding:28px 36px; display:inline-block; } .count-title{ font-size:1.2rem; margin-bottom:14px; } #countBox{ font-size: clamp(1.6rem,4vw,2.4rem); font-weight:bold; letter-spacing:2px; color:#c42e63; min-height:44px; } .happy-slogan{ margin-top:30px; font-size: clamp(1.4rem,3vw,2rem); font-weight:bold; animation: pulse 1.6s infinite; } .emoji-group{ font-size:3.2rem; margin:24px 0; } keyframes floatUp{ 0%{transform: translateY(0);} 100%{transform: translateY(-10px);} } keyframes pulse{ 0%{transform:scale(1);opacity:0.85;} 50%{transform:scale(1.04);opacity:1;} 100%{transform:scale(1);opacity:0.85;} } /* 飘落元素 */ .fall-item{ position:absolute; font-size:26px; pointer-events:none; animation: fallAnim 9s linear infinite; } keyframes fallAnim{ 0%{transform: translateY(-40px) rotate(0deg);opacity:1;} 100%{transform: translateY(105vh) rotate(360deg);opacity:0;} } canvas{ position:fixed; top:0;left:0; width:100%;height:100%; pointer-events:none; z-index:1; } /style /head body canvas idfirework/canvas div classwrap h1喜迎中秋 国庆10天假期/h1 div classdesc期待已久的超长假日即将到来/div div classcount-card div classcount-title距离假期开启/div div idcountBox加载中.../div /div div classhappy-slogan开心值直接拉满 ✨/div div classemoji-group/div div classdesc好好放松快乐过节双倍欢喜/div /div script // 倒计时【修复版】目标2026‑10‑01 0点 const targetTimestamp new Date(2026-10-01 00:00:00).getTime(); const countDom document.getElementById(countBox); function renderCountdown(){ const now Date.now(); const diff targetTimestamp - now; if(diff 0){ countDom.innerText 假期已正式开启; return; } const days Math.floor(diff / (1000 * 60 * 60 * 24)); const hours Math.floor((diff % (1000*60*60*24)) / (1000*60*60)); const mins Math.floor((diff % (1000*60*60)) / (1000*60)); const secs Math.floor((diff % (1000*60)) / 1000); countDom.innerText ${days}天 ${hours}时 ${mins}分 ${secs}秒; } renderCountdown(); setInterval(renderCountdown, 1000); // 飘落emoji const emojiList [,,,,,,]; setInterval((){ const el document.createElement(div); el.className fall-item; el.textContent emojiList[Math.floor(Math.random()*emojiList.length)]; el.style.left Math.random()*100 %; el.style.animationDuration (5 Math.random()*6)s; document.body.appendChild(el); setTimeout(() el.remove(), 11000); },450); // 烟花画布 const canvas document.getElementById(firework); const ctx canvas.getContext(2d); function resizeCanvas(){ canvas.width window.innerWidth; canvas.height window.innerHeight; } resizeCanvas(); window.addEventListener(resize, resizeCanvas); class Particle{ constructor(x,y,color){ this.x x; this.y y; this.sx (Math.random()-0.5)*6; this.sy (Math.random()-0.5)*6; this.alpha 1; this.color color; this.size Math.random()*31; } update(){ this.x this.sx; this.y this.sy; this.sy 0.04; this.alpha -0.018; } draw(){ ctx.save(); ctx.globalAlpha this.alpha; ctx.fillStyle this.color; ctx.beginPath(); ctx.arc(this.x,this.y,this.size,0,Math.PI*2); ctx.fill(); ctx.restore(); } } let particles []; function boom(x,y){ const colors [#ff87ad,#ffb6c1,#ff5e8e,#fff]; for(let i0;i70;i){ particles.push(new Particle(x,y,colors[Math.floor(Math.random()*colors.length)])); } } setInterval((){ boom(Math.random()*canvas.width, Math.random()*canvas.height*0.5); },2200); function loop(){ ctx.fillStyle rgba(255,180,200,0.07); ctx.fillRect(0,0,canvas.width,canvas.height); for(let iparticles.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访问效果
举国欢庆的国庆如约而至作为大学生暂别书桌伏案的日常。抛开学习的琐碎带着满心欢喜感受金秋与节日碰撞出来的无限欢愉。通过豆包创建的完成方法步骤1.提示词喜迎中秋 国庆共 10 天假期 —— 表达我的开心 - html 表达 返回代码需要显示倒计时增强互动点击的时候页要有特效返回代码!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: radial-gradient(circle at 20% 10%, #ffd6e2 0%, #ffb8cc 40%, #ffa8bf 100%); font-family: Microsoft Yahei, system-ui; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #992b55; } /* 背景光晕呼吸 */ body::before{ content:; position:fixed; top:0;left:0; width:100%;height:100%; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.3), transparent 55%); animation: bgBreath 7s ease-in-out infinite alternate; z-index:-1; } keyframes bgBreath { from{opacity:0.6;} to{opacity:1;} } .wrap{ text-align:center; z-index:2; padding:20px; max-width:700px; } h1{ font-size: clamp(2rem,5vw,3.2rem); background: linear-gradient(90deg,#d13b6f,#ff6b9b); -webkit-background-clip:text; color:transparent; margin-bottom:16px; animation: floatUp 2.2s ease infinite alternate; } .desc{ font-size: clamp(1rem,2vw,1.4rem); margin-bottom:32px; opacity:0.85; } /* 玻璃倒计时卡片 修复渲染问题 */ .count-card{ backdrop-filter: blur(14px); background:rgba(255,255,255,0.42); border:1px solid rgba(255,255,255,0.7); box-shadow: 0 8px 32px rgba(200,40,90,0.18); border-radius:24px; padding:28px 36px; display:inline-block; } .count-title{ font-size:1.2rem; margin-bottom:14px; } #countBox{ font-size: clamp(1.6rem,4vw,2.4rem); font-weight:bold; letter-spacing:2px; color:#c42e63; min-height:44px; } .happy-slogan{ margin-top:30px; font-size: clamp(1.4rem,3vw,2rem); font-weight:bold; animation: pulse 1.6s infinite; } .emoji-group{ font-size:3.2rem; margin:24px 0; } keyframes floatUp{ 0%{transform: translateY(0);} 100%{transform: translateY(-10px);} } keyframes pulse{ 0%{transform:scale(1);opacity:0.85;} 50%{transform:scale(1.04);opacity:1;} 100%{transform:scale(1);opacity:0.85;} } /* 飘落元素 */ .fall-item{ position:absolute; font-size:26px; pointer-events:none; animation: fallAnim 9s linear infinite; } keyframes fallAnim{ 0%{transform: translateY(-40px) rotate(0deg);opacity:1;} 100%{transform: translateY(105vh) rotate(360deg);opacity:0;} } canvas{ position:fixed; top:0;left:0; width:100%;height:100%; pointer-events:none; z-index:1; } /style /head body canvas idfirework/canvas div classwrap h1喜迎中秋 国庆10天假期/h1 div classdesc期待已久的超长假日即将到来/div div classcount-card div classcount-title距离假期开启/div div idcountBox加载中.../div /div div classhappy-slogan开心值直接拉满 ✨/div div classemoji-group/div div classdesc好好放松快乐过节双倍欢喜/div /div script // 倒计时【修复版】目标2026‑10‑01 0点 const targetTimestamp new Date(2026-10-01 00:00:00).getTime(); const countDom document.getElementById(countBox); function renderCountdown(){ const now Date.now(); const diff targetTimestamp - now; if(diff 0){ countDom.innerText 假期已正式开启; return; } const days Math.floor(diff / (1000 * 60 * 60 * 24)); const hours Math.floor((diff % (1000*60*60*24)) / (1000*60*60)); const mins Math.floor((diff % (1000*60*60)) / (1000*60)); const secs Math.floor((diff % (1000*60)) / 1000); countDom.innerText ${days}天 ${hours}时 ${mins}分 ${secs}秒; } renderCountdown(); setInterval(renderCountdown, 1000); // 飘落emoji const emojiList [,,,,,,]; setInterval((){ const el document.createElement(div); el.className fall-item; el.textContent emojiList[Math.floor(Math.random()*emojiList.length)]; el.style.left Math.random()*100 %; el.style.animationDuration (5 Math.random()*6)s; document.body.appendChild(el); setTimeout(() el.remove(), 11000); },450); // 烟花画布 const canvas document.getElementById(firework); const ctx canvas.getContext(2d); function resizeCanvas(){ canvas.width window.innerWidth; canvas.height window.innerHeight; } resizeCanvas(); window.addEventListener(resize, resizeCanvas); class Particle{ constructor(x,y,color){ this.x x; this.y y; this.sx (Math.random()-0.5)*6; this.sy (Math.random()-0.5)*6; this.alpha 1; this.color color; this.size Math.random()*31; } update(){ this.x this.sx; this.y this.sy; this.sy 0.04; this.alpha -0.018; } draw(){ ctx.save(); ctx.globalAlpha this.alpha; ctx.fillStyle this.color; ctx.beginPath(); ctx.arc(this.x,this.y,this.size,0,Math.PI*2); ctx.fill(); ctx.restore(); } } let particles []; function boom(x,y){ const colors [#ff87ad,#ffb6c1,#ff5e8e,#fff]; for(let i0;i70;i){ particles.push(new Particle(x,y,colors[Math.floor(Math.random()*colors.length)])); } } setInterval((){ boom(Math.random()*canvas.width, Math.random()*canvas.height*0.5); },2200); function loop(){ ctx.fillStyle rgba(255,180,200,0.07); ctx.fillRect(0,0,canvas.width,canvas.height); for(let iparticles.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访问效果
