透壳音乐播放器代码

沈野

Hookah Baby

Ari Lennox

Hookah Baby· 2026年 · 无损

⇄

▶ 暂停

↓

点击查看音乐链接

游客，如果您要查看本帖隐藏内容请回复

沈野

1. <div style="max-width:500px;margin:50px auto;font-family:system-ui,-apple-system;box-sizing:border-box;">
   
2.     <div style="background:linear-gradient(145deg,#0a1020,#142038);border-radius:30px;padding:50px;border:0;box-shadow:0 8px 30px rgba(0,0,0,0.3);text-align:center;">
   
3. 
   
4.         <div style="display:none;visibility:hidden;height:0;overflow:hidden;" class="attach_source">
   
5.         <!-- &#128073; 封面图片写在这里，替换成你的附件标签 -->
   
6.         [attachimg]封面[/attachimg]
   
7.         </div>
   
8.         
   
9.         <div style="position:relative;margin:0 auto;margin-bottom:22px;--cd-width:400px;--cd-height:400px;--cd-padding:10px;--cover-radius:25px;--box-radius:30px;width:var(--cd-width);height:var(--cd-height);border-radius:var(--box-radius);overflow:hidden;border:1px solid rgba(255,255,255,0.14);box-shadow:0 0 2px rgba(255,255,255,0.1),inset 0 0 18px rgba(255,255,255,0.06),inset 0 0 30px rgba(0,0,0,0.08);">
   
10.             <div style="position:absolute;top:var(--cd-padding);left:var(--cd-padding);right:var(--cd-padding);bottom:var(--cd-padding);overflow:hidden;border-radius:var(--cover-radius);">
    
11.                 <img class="cd-cover-img" alt="封面" style="width:100%;height:100%;display:block;object-fit:cover;">
    
12.             </div>
    
13.             <div style="position:absolute;top:0;left:0;right:0;height:48%;background:linear-gradient(135deg,rgba(255,255,255,0.16) 0%,rgba(255,255,255,0) 60%);pointer-events:none;"></div>
    
14.             <div style="position:absolute;top:0;left:0;right:0;bottom:0;border:1px solid rgba(255,255,255,0.08);border-radius:var(--box-radius);pointer-events:none;"></div>
    
15.             <div style="position:absolute;bottom:0;left:0;right:0;height:24%;background:linear-gradient(to top,rgba(0,0,0,0.12),transparent);pointer-events:none;"></div>
    
16.         </div>
    
17. 
    
18.         <div style="margin-bottom:20px;">插入网易云外链</div>
    
19.         <h2 style="color:#fff;font-size:26px;margin:0 0 6px;font-weight:600;">Hookah Baby</h2>
    
20.         <p style="color:#fff;font-size:20px;margin:0 0 12px;">Ari Lennox</p>
    
21.         <p style="color:#fff;font-size:14px;margin:0 0 26px;">Hookah Baby· 2026年 · 无损</p>
    
22. 
    
23.         <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;">
    
24.             <div style="width:46px;height:46px;border-radius:50%;background:rgba(10,20,40,0.4);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#fff;">&#8644;</div>
    
25.             <div style="flex:1;height:46px;border-radius:99px;background:rgba(10,20,40,0.4);border:1px solid rgba(255,255,255,0.08);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;">&#9654; 暂停</div>
    
26.             <div style="width:46px;height:46px;border-radius:50%;background:rgba(10,20,40,0.4);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#fff;">↓</div>
    
27.         </div>
    
28. 
    
29.         <details style="background:rgba(10,20,40,0.35);border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:0;box-sizing:border-box;">
    
30.             <summary style="padding:12px 16px;color:#eee;cursor:pointer;list-style:none;text-align:center;">点击查看音乐链接</summary>
    
31.             <div style="padding:0 16px 16px;color:#ccc;font-size:15px;line-height:1.6;text-align:center;">
    
32. [align=center][hide]https://music.163.com/#/album?id=389964144[/hide][/align]
    
33.             </div>
    
34.         </details>
    
35.     </div>
    
36. </div>
    
37. <script>
    
38. document.addEventListener("DOMContentLoaded",function(){let s=document.querySelector(".attach_source img");let c=document.querySelector(".cd-cover-img");s&&c&&(c.src=s.src);})
    
39. </script>
    

复制代码