用豆包完成生成步骤1.提示词喜迎中秋国庆共十天假期———用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: linear-gradient(135deg, #c31432, #240b36); font-family: Microsoft YaHei, sans-serif; overflow: hidden; position: relative; } .container { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; position: relative; z-index: 10; } .main-title { font-size: 3.5rem; font-weight: bold; background: linear-gradient(to right, #ffd700, #ffed4e, #ffd700); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 30px rgba(255, 215, 0, 0.5); margin-bottom: 20px; animation: bounce 2s ease-in-out infinite; } .sub-title { font-size: 1.8rem; color: #ffeaa7; margin-bottom: 30px; animation: fadeInUp 1.5s ease-out; } .holiday-badge { display: inline-block; padding: 15px 40px; background: linear-gradient(45deg, #ff6b6b, #feca57); border-radius: 50px; font-size: 1.5rem; font-weight: bold; box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4); animation: pulse 1.5s ease-in-out infinite; margin-bottom: 20px; } .emoji-row { font-size: 3rem; margin: 20px 0; animation: shake 0.5s ease-in-out infinite alternate; } .count-text { font-size: 1.3rem; color: #dfe6e9; line-height: 2; } .highlight { color: #ffd700; font-weight: bold; font-size: 1.5rem; } /* 飘落动画 */ .fall-item { position: absolute; top: -50px; font-size: 2rem; animation: fall linear infinite; opacity: 0.8; } keyframes fall { to { transform: translateY(110vh) rotate(360deg); } } keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } keyframes shake { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } /* 灯笼装饰 */ .lantern { position: absolute; width: 60px; height: 80px; background: #ff4757; border-radius: 50%; animation: swing 3s ease-in-out infinite; transform-origin: top center; } .lantern::before { content: ; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 30px; height: 10px; background: #ffd700; border-radius: 5px; } .lantern::after { content: ; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 4px; height: 20px; background: #ffd700; } keyframes swing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } } .lantern-left { top: 50px; left: 10%; } .lantern-right { top: 50px; right: 10%; animation-delay: 0.5s; } /style /head body !-- 左右灯笼 -- div classlantern lantern-left/div div classlantern lantern-right/div div classcontainer div classmain-title 中秋遇国庆 /div div classsub-title双节同庆 · 欢乐加倍/div div classholiday-badge 整整十天小长假 /div div classemoji-row /div div classcount-text 吃月饼、赏明月、庆华诞、享长假br span classhighlight快乐翻倍幸福拉满/spanbr 每天睡到自然醒行程安排全由我定br 这就是十天假期的快乐呀 /div /div script // 随机飘落元素 const items [, , , , ✨, , , , ]; const colors [#ffd700, #ff6b6b, #feca57, #ff9ff3, #54a0ff]; function createFallItem() { const item document.createElement(div); item.className fall-item; item.textContent items[Math.floor(Math.random() * items.length)]; item.style.left Math.random() * 100 vw; item.style.animationDuration (Math.random() * 5 5) s; item.style.animationDelay Math.random() * 2 s; item.style.fontSize (Math.random() * 1.5 1.5) rem; document.body.appendChild(item); setTimeout(() { item.remove(); }, 10000); } // 持续生成飘落元素 setInterval(createFallItem, 500); // 初始生成一批 for (let i 0; i 15; i) { setTimeout(createFallItem, i * 200); } /script /body /html2.展示代码效果创建文本文档显示文件扩展名修改文件名添加代码内容——通过记事本打开注一定要保存代码CtrlS显示效果:这个页面包含了这些开心元素红金渐变背景满满的节日喜庆感左右两个摇摆的红灯笼烘托节日氛围金色发光的主标题配上弹跳动画「整整十天小长假」脉冲高亮徽章持续飘落的月饼、灯笼、国旗、星星等节日 emoji表达放假心情的文案突出 睡到自然醒、行程自己定 的快乐