论坛 › 表格设计院 › 透壳音乐播放器代码

沈野 发表于 2026-8-3 16:04:10

透壳音乐播放器代码

<div style="max-width:500px;margin:50px auto;font-family:system-ui,-apple-system;box-sizing:border-box;">
    <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;">

      <div style="display:none;visibility:hidden;height:0;overflow:hidden;" class="attach_source">
      <!-- &#128073; 封面图片写在这里，替换成你的附件标签 -->
      
      </div>
      
      <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);">
            <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);">
                <img class="cd-cover-img" alt="封面" style="width:100%;height:100%;display:block;object-fit:cover;">
            </div>
            <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>
            <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>
            <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>
      </div>

      <div style="margin-bottom:20px;"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=469272852&auto=0&height=32"></iframe></div>
      <h2 style="color:#fff;font-size:26px;margin:0 0 6px;font-weight:600;">Hookah Baby</h2>
      <p style="color:#fff;font-size:20px;margin:0 0 12px;">Ari Lennox</p>
      <p style="color:#fff;font-size:14px;margin:0 0 26px;">Hookah Baby· 2026年 · 无损</p>

      <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;">
            <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>
            <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;">▶ 暂停</div>
            <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>
      </div>

      <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;">
            <summary style="padding:12px 16px;color:#eee;cursor:pointer;list-style:none;text-align:center;">点击查看音乐链接</summary>
            <div style="padding:0 16px 16px;color:#ccc;font-size:15px;line-height:1.6;text-align:center;">
**** Hidden Message *****
            </div>
      </details>
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded",function(){let s=document.querySelector(".attach_source img");let c=document.querySelector(".cd-cover-img");s&&c&&(c.src=s.src);})
</script>

沈野 发表于 2026-8-3 16:58:19

<div style="max-width:500px;margin:50px auto;font-family:system-ui,-apple-system;box-sizing:border-box;">
    <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;">

      <div style="display:none;visibility:hidden;height:0;overflow:hidden;" class="attach_source">
      <!-- &#128073; 封面图片写在这里，替换成你的附件标签 -->
      封面
      </div>
      
      <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);">
            <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);">
                <img class="cd-cover-img" alt="封面" style="width:100%;height:100%;display:block;object-fit:cover;">
            </div>
            <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>
            <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>
            <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>
      </div>

      <div style="margin-bottom:20px;">插入网易云外链</div>
      <h2 style="color:#fff;font-size:26px;margin:0 0 6px;font-weight:600;">Hookah Baby</h2>
      <p style="color:#fff;font-size:20px;margin:0 0 12px;">Ari Lennox</p>
      <p style="color:#fff;font-size:14px;margin:0 0 26px;">Hookah Baby· 2026年 · 无损</p>

      <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;">
            <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>
            <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;">▶ 暂停</div>
            <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>
      </div>

      <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;">
            <summary style="padding:12px 16px;color:#eee;cursor:pointer;list-style:none;text-align:center;">点击查看音乐链接</summary>
            <div style="padding:0 16px 16px;color:#ccc;font-size:15px;line-height:1.6;text-align:center;">
**** Hidden Message *****
            </div>
      </details>
    </div>
</div>
<script>
document.addEventListener("DOMContentLoaded",function(){let s=document.querySelector(".attach_source img");let c=document.querySelector(".cd-cover-img");s&&c&&(c.src=s.src);})
</script>

查看完整版本: 透壳音乐播放器代码