旋律漫过暮色音符落在星光之上让每一段温柔的节奏接住世间所有细碎的浪漫通过豆包创建的完成方法步骤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(145deg, #20002c, #cbb4d4, #2c5364); overflow: hidden; font-family: Segoe UI, PingFang SC, Microsoft Yahei, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #ffffff; } /* 全局音符容器 */ .note-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } /* 点击上浮音符 - 鲜艳彩虹渐变 */ .click-note { position: absolute; font-size: 32px; background: linear-gradient(120deg, #ff6ec7, #ffdd00, #00e5ff); -webkit-background-clip: text; color: transparent; opacity: 1; animation: popRise 1.2s ease-out forwards; pointer-events: none; filter: drop-shadow(0 0 10px rgba(255,120,220,0.8)); } keyframes popRise { 0% { transform: scale(0.2) translateY(0) rotate(-10deg); opacity: 1; } 50% { transform: scale(1.3) translateY(-60px) rotate(8deg); } 100% { transform: scale(0.9) translateY(-120px) rotate(15deg); opacity: 0; } } /* 自动飘落优雅音符 */ .music-note { position: absolute; font-size: 22px; opacity: 0.85; animation: fallSlow linear forwards; pointer-events: none; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)); } keyframes fallSlow { 0% { transform: translateY(-60px) rotate(0deg); opacity: 0; } 15% {opacity: 0.9;} 85% {opacity: 0.85;} 100% { transform: translateY(100vh) rotate(280deg); opacity: 0; } } /* 主卡片 高级磨砂玻璃 */ .music-card { z-index: 10; background: rgba(255,255,255,0.10); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 48px 56px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.2); text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12); transition: transform 0.24s ease; max-width: 480px; } .music-card:active{ transform: scale(0.97); } .music-card h1 { font-size: 30px; margin-bottom:12px; background: linear-gradient(90deg,#ff70a6,#ffda79,#4ecdc4); -webkit-background-clip:text; color:transparent; letter-spacing:2px; } .subtitle{ font-size:15px; color:#ffe8f2; margin-bottom:28px; } .audio-box { margin-bottom:24px; } audio{ width:100%; } .btn-group{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; } .play-btn { padding:13px 30px; border:none; border-radius:999px; font-size:16px; cursor:pointer; transition:0.25s ease; } .btn-primary{ background:linear-gradient(135deg,#ff416c,#ff4b2b); color:#fff; box-shadow:0 4px 18px rgba(255,65,108,0.4); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 6px 24px rgba(255,65,108,0.6); } .btn-secondary{ background:rgba(255,255,255,0.12); color:#ffffff; border:1px solid rgba(255,255,255,0.25); } .btn-secondary:hover{ background:rgba(255,255,255,0.18); transform:translateY(-2px); } .play-btn:active{ transform:scale(0.96); } .info-row{ display:flex; justify-content:space-between; font-size:13px; color:#ffd6e8; padding-top:16px; border-top:1px solid rgba(255,255,255,0.12); } .tip{ margin-top:18px; font-size:14px; color:#fff0f7; } /* 鲜艳发光背景光晕 */ .glow-bg{ position:fixed; width:420px; height:420px; background:radial-gradient(circle,rgba(255,80,180,0.35),transparent 70%); top:10%; left:10%; filter:blur(60px); z-index:0; pointer-events:none; } .glow-bg.two{ top:55%; right:10%; background:radial-gradient(circle,rgba(0,220,255,0.30),transparent 70%); } /style /head body !-- 柔光背景光晕 -- div classglow-bg/div div classglow-bg two/div !-- 音符层 -- div classnote-container idnoteWrap/div div classmusic-card idpanel h1Melody Note/h1 p classsubtitle高级质感互动音乐空间/p div classaudio-box audio idbgMusic controls loop source srchttps://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3 typeaudio/mpeg 浏览器不支持音频播放 /div div classbtn-group button classplay-btn btn-primary idstartBtn播放音乐/button button classplay-btn btn-secondary idstopBtn暂停音乐/button /div div classinfo-row span 页面加载自动飘落音符/span span️ 点击页面依然可生成闪光音符/span /div div classtip打开页面即刻播放音符雨✨/div /div script const noteWrap document.getElementById(noteWrap); const startBtn document.getElementById(startBtn); const stopBtn document.getElementById(stopBtn); const bgMusic document.getElementById(bgMusic); const panel document.getElementById(panel); // 扩充音符符号库 const noteList [♪,♫,♬,♩,♭,♮,,,]; // 鲜艳霓虹配色 const nobleColors [ #ff6ec7,#ffdd00,#00e5ff,#ff7878,#7b61ff,#4aff9c ]; let timer null; // 自动飘落音符 function createNote(){ const el document.createElement(div); el.classList.add(music-note); el.innerText noteList[Math.floor(Math.random() * noteList.length)]; el.style.left Math.random() * 100 %; const size Math.random() * 22 14; el.style.fontSize size px; el.style.color nobleColors[Math.floor(Math.random()*nobleColors.length)]; const duration Math.random() * 7 4; el.style.animationDuration duration s; noteWrap.appendChild(el); setTimeout(() el.remove(), duration * 1000); } // 页面一加载直接开启音符雨 function startAnimate(){ if(timer) return; timer setInterval(createNote,320); } function stopAnimate(){ clearInterval(timer); timer null; } // 网页打开立刻运行 startAnimate(); // 点击触发上浮音符保留 function createClickNote(x,y){ const el document.createElement(div); el.classList.add(click-note); el.innerText noteList[Math.floor(Math.random() * noteList.length)]; el.style.left x px; el.style.top y px; noteWrap.appendChild(el); setTimeout(() el.remove(),1200); } startBtn.addEventListener(click,(e){ e.stopPropagation(); bgMusic.play(); }) stopBtn.addEventListener(click,(e){ e.stopPropagation(); bgMusic.pause(); }) document.body.addEventListener(click,function(e){ createClickNote(e.clientX,e.clientY); }) /script /body /html2.展示代码效果创建文本文档显示文件扩展名修改文件名添加代码内容——通过记事本打开注一定要保存代码CtrlS访问效果