💿 唱片播放器移到顶栏：旋转CD+点击展开+光湖风格面板
This commit is contained in:
root
parent
7035864178
commit
4ac390bc87
@ -295,6 +295,9 @@ table.tool-table td:last-child{text-align:right}
|
||||
table.tool-table td{display:block;padding:8px 0}
|
||||
table.tool-table td:last-child{text-align:left}
|
||||
}
|
||||
|
||||
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
|
||||
@keyframes playerSlide{0%{opacity:0;transform:translateY(-8px) scaleY(.95)}100%{opacity:1;transform:translateY(0) scaleY(1)}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -320,11 +323,37 @@ table.tool-table td:last-child{text-align:right}
|
||||
</div>
|
||||
<div class="tb-right">
|
||||
<span class="tb-tag" onclick="toggleLogin()" id="login-toggle">登录</span>
|
||||
<!-- 光湖唱片播放器 -->
|
||||
<div style="position:relative;display:flex;align-items:center;gap:6px;cursor:pointer" onclick="togglePlayer()" id="vinyl-trigger">
|
||||
<div id="vinyl-disc" style="width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,rgba(90,208,224,.5) 0%,rgba(11,20,36,.3) 35%,rgba(11,20,36,.6) 60%,rgba(90,208,224,.15) 100%);border:1px solid rgba(90,208,224,.2);display:flex;align-items:center;justify-content:center;animation:spin 6s linear infinite;flex-shrink:0">
|
||||
<div style="width:8px;height:8px;border-radius:50%;background:rgba(90,208,224,.6);box-shadow:0 0 6px rgba(90,208,224,.3)"></div>
|
||||
</div>
|
||||
<span style="font-size:11px;color:rgba(90,208,224,.4);letter-spacing:1px" id="vinyl-label">音乐</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容 -->
|
||||
<div class="page">
|
||||
<!-- 光湖唱片播放器 - 展开面板 -->
|
||||
<div id="vinyl-panel" style="display:none;position:fixed;top:72px;right:48px;z-index:49;width:320px;background:rgba(11,20,36,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(90,208,224,.1);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px rgba(90,208,224,.04);padding:16px;animation:playerSlide .3s cubic-bezier(.22,1,.36,1);transform-origin:top right">
|
||||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
|
||||
<div style="width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(90,208,224,.5) 0%,rgba(11,20,36,.3) 30%,rgba(11,20,36,.7) 55%,rgba(90,208,224,.12) 100%);border:1px solid rgba(90,208,224,.15);display:flex;align-items:center;justify-content:center;animation:spin 8s linear infinite">
|
||||
<div style="width:10px;height:10px;border-radius:50%;background:rgba(90,208,224,.5);box-shadow:0 0 8px rgba(90,208,224,.3)"></div>
|
||||
</div>
|
||||
<div style="flex:1">
|
||||
<div style="font-size:13px;color:rgba(90,208,224,.7)">光湖 · 音律</div>
|
||||
<div style="font-size:11px;color:rgba(90,208,224,.35);margin-top:2px">网易云音乐 歌单</div>
|
||||
</div>
|
||||
<div style="width:28px;height:28px;border-radius:50%;border:1px solid rgba(90,208,224,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;color:rgba(90,208,224,.4);transition:.2s" onclick="event.stopPropagation();closePlayer()">✕</div>
|
||||
</div>
|
||||
<div style="border-radius:10px;overflow:hidden">
|
||||
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=288 height=80 src="//music.163.com/outchain/player?type=0&id=3778678&auto=1&height=80"></iframe>
|
||||
</div>
|
||||
<div style="margin-top:8px;font-size:11px;color:rgba(90,208,224,.2);text-align:center">点击播放箭头开始放歌</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="hero">
|
||||
<h1>第五域</h1>
|
||||
@ -968,18 +997,39 @@ async function sendMessage() {
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
// ===== 光湖唱片 =====
|
||||
let playerOpen = false;
|
||||
function togglePlayer() {
|
||||
playerOpen = !playerOpen;
|
||||
const p = document.getElementById("vinyl-panel");
|
||||
const l = document.getElementById("vinyl-label");
|
||||
const d = document.getElementById("vinyl-disc");
|
||||
if (playerOpen) {
|
||||
p.style.display = "block";
|
||||
l.textContent = "▕音";
|
||||
d.style.borderColor = "rgba(90,208,224,.5)";
|
||||
} else {
|
||||
p.style.display = "none";
|
||||
l.textContent = "音乐";
|
||||
d.style.borderColor = "rgba(90,208,224,.2)";
|
||||
}
|
||||
}
|
||||
function closePlayer() {
|
||||
playerOpen = false;
|
||||
document.getElementById("vinyl-panel").style.display = "none";
|
||||
document.getElementById("vinyl-label").textContent = "音乐";
|
||||
document.getElementById("vinyl-disc").style.borderColor = "rgba(90,208,224,.2)";
|
||||
}
|
||||
// 点击页面其他地方关闭播放器
|
||||
document.addEventListener("click", function(e) {
|
||||
if (playerOpen && !e.target.closest("#vinyl-panel") && !e.target.closest("#vinyl-trigger")) {
|
||||
closePlayer();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<!-- 光湖音律播放器 -->
|
||||
<div style="position:fixed;bottom:24px;right:24px;z-index:40;width:350px;border-radius:16px;overflow:hidden;background:rgba(11,20,36,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(90,208,224,.12);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 20px rgba(90,208,224,.05);opacity:.7;transition:all .35s ease" onmouseover="this.style.opacity=1;this.style.boxShadow='0 8px 40px rgba(0,0,0,.5),0 0 30px rgba(90,208,224,.1)'" onmouseout="this.style.opacity=.7;this.style.boxShadow='0 8px 32px rgba(0,0,0,.4),0 0 20px rgba(90,208,224,.05)'">
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:10px 16px 6px;border-bottom:1px solid rgba(90,208,224,.06)">
|
||||
<span style="font-size:12px;letter-spacing:1px;color:rgba(90,208,224,.5)">◈ 光湖 · 音律</span>
|
||||
<span style="font-size:11px;color:rgba(90,208,224,.25);margin-left:auto">网易云音乐</span>
|
||||
</div>
|
||||
<div style="padding:6px 0 0">
|
||||
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=350 height=80 src="//music.163.com/outchain/player?type=0&id=3778678&auto=1&height=80"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user