【Love Got U (Speed Up)】- Richz 前奏控系列
<!-- DZ音乐卡片｜屏蔽附件悬浮弹窗+点击放大弹窗｜黑胶旋转 -->
<style>
/* ==========【全局可调参数区｜全部配置在这里修改】========== */
.music-card-wrap{
--card-bg: #19191f;
--text-color: #f0f0f0;
--text-sub-color: #aaaaaa;
--border-color: #333338;
--card-radius: 30px;
--card-margin-top: 60px;
--card-margin-bottom: 60px;
--card-width: 500px;
--cover-size: 350px;
--vinyl-border-width: 30px;
--vinyl-opacity: 0.35;
--player-radius: 10px;
--player-height: 1px;
--lyric-width: 94%;
--lyric-height: 120px;
--lyric-text-color: #dddddd;
--lyric-fontsize: 13px;
--lyric-lineheight: 24px;
--lyric-speed: 70s;
--lyric-margin: 14px auto;
--lyric-text-align: center;
--fold-title-fontsize: 14px;
--fold-content-fontsize: 14px;
--fold-bg: #26262c;
--fold-border-color: #444448;
--fold-title-color: #eeeeee;
--fold-content-color: #cccccc;
--rotate-duration: 20s;
--hover-move-time: 0.25s;
--hover-move-height: -8px;
--font-family: "Microsoft Yahei",sans-serif;
width: var(--card-width);
margin: var(--card-margin-top) auto var(--card-margin-bottom) auto;
background: var(--card-bg);
border-radius: var(--card-radius);
padding: 20px;
color: var(--text-color);
font-family: var(--font-family);
border: 1px solid var(--border-color);
box-shadow: 0 4px 18px rgba(0,0,0,0.35);
box-sizing: border-box;
transition: transform var(--hover-move-time) ease, box-shadow var(--hover-move-time) ease;
}
.music-card-wrap:hover{
transform: translateY(var(--hover-move-height));
box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.vinyl-cover-box{
width: var(--cover-size);
height: var(--cover-size);
margin: 0 auto 16px auto;
position: relative;
}
.vinyl-ring{
width: 100%;
height: 100%;
border-radius: 50%;
background: #000;
opacity: var(--vinyl-opacity);
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* 1.拦截DZ自动生成的zoom放大链接，禁止点击弹窗 */
.vinyl-cover-box a.zoom{
pointer-events: none !important;
text-decoration: none !important;
display: block !important;
}
/* 2.屏蔽附件hover弹出的「下载附件/保存相册」悬浮提示框 */
.vinyl-cover-box .attachinfo,
.vinyl-cover-box .tip,
.vinyl-cover-box .attachment_pop,
.vinyl-cover-box {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.vinyl-cover-box img{
width: calc(100% - var(--vinyl-border-width)*2);
height: calc(100% - var(--vinyl-border-width)*2);
border-radius: 50%;
object-fit: cover;
position: absolute;
top: var(--vinyl-border-width);
left: var(--vinyl-border-width);
z-index: 2;
cursor: default;
display:block;
}
@keyframes rotateDisc {
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
.rotate-active{
animation: rotateDisc var(--rotate-duration) linear infinite;
}
.music-player-box{
width: 100%;
height: var(--player-height);
margin-bottom: 1px;
border-radius: var(--player-radius);
overflow: hidden;
background: transparent !important;
}
.music-player-box iframe{
width: 100%;
height: 100%;
border: 0;
margin:0;
padding:0;
display:block;
}
.song-name{
font-size: 16px;
font-weight: bold;
text-align: center;
margin:6px 0;
color: var(--text-color);
}
.song-author{
font-size:14px;
color: var(--text-sub-color);
text-align: center;
margin-bottom:16px;
}
.lyric-wrap{
position: relative;
height: var(--lyric-height);
overflow: hidden;
margin: var(--lyric-margin);
}
.lyric-wrap::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:2;
background:linear-gradient(to bottom, var(--card-bg) 0%, transparent 20%, transparent 80%, var(--card-bg) 100%);
}
.lyric-scroll{
width: var(--lyric-width);
margin:0 auto;
}
.lyric-content{
width:100%;
font-size: var(--lyric-fontsize);
color: var(--lyric-text-color);
line-height: var(--lyric-lineheight);
text-align: var(--lyric-text-align);
white-space: pre-line !important;
animation: scrollLyricVertical var(--lyric-speed) linear infinite;
}
@keyframes scrollLyricVertical{
from{transform: translateY(0);}
to{transform: translateY(-50%);}
}
.fold-panel{
border: 1px solid var(--fold-border-color);
border-radius: 12px;
overflow: hidden;
background:var(--fold-bg);
}
.fold-title{
padding:18px 22px;
cursor: pointer;
font-size: var(--fold-title-fontsize);
display:flex;
justify-content: space-between;
align-items:center;
user-select:none;
color:var(--fold-title-color);
}
.fold-title .arrow{
font-size: var(--fold-title-fontsize);
transition: transform 0.25s ease;
}
.fold-content{
padding:0 22px;
font-size: var(--fold-content-fontsize);
line-height:1.6;
max-height:0;
overflow:hidden;
transition: max-height 0.35s ease, padding 0.35s ease;
color:var(--fold-content-color);
}
.fold-content.open{
max-height:600px;
padding:0 22px 18px 22px;
}
</style>
<div class="music-card-wrap">
<div class="vinyl-cover-box">
<div class="vinyl-ring"></div>
<!-- =========替换引号内为图片真实直链========= -->
</div>
<div class="music-player-box">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=1 src="//music.163.com/outchain/player?type=2&id=3387079732&auto=1&height=32"></iframe>
</div>
<div class="song-name">Love Got U (Speed Up)</div>
<div class="song-author">歌手：Richz - 所属专辑：Love Got U</div>
<div class="lyric-wrap">
<div class="lyric-scroll">
<div class="lyric-content">
作曲 : Richz
编曲 : Richz
制作人 : Richz
OP/SP : Modern Sky Game House
No we never choose
Whycan't you do
When baby you know the love got you
I've been out on the ocean searching for something thatain't blue
And you got sick of the motion hoping the fish would come to you
No we never choose
Always wishing for something to come true
Whycan't you do
When baby you know the love got you
Love got you
Love got you
Love got you
Love got you
Love got you
Love got you
Love got you
No we never choose
Always wishing for something to come true
Whycan't you do
When baby you know the love got you
Love got you
Love got you
Love got you
Love got you
Love got you
</div>
</div>
</div>
<div class="fold-panel">
<div class="fold-title">
<span>点击展开查看音乐地址内容</span>
<span class="arrow">▼</span>
</div>
<div class="fold-content">
**** Hidden Message *****
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
const coverImg = document.querySelector('.vinyl-cover-box img');
const foldTitle = document.querySelector('.fold-title');
const foldContent = document.querySelector('.fold-content');
const arrow = foldTitle.querySelector('.arrow');
if(coverImg){
coverImg.classList.add('rotate-active');
}
// 兜底拦截点击放大弹窗
const zoomLink = document.querySelector('.vinyl-cover-box a.zoom');
if(zoomLink){
zoomLink.onclick = function(e){
e.preventDefault();
return false;
}
}
foldTitle.addEventListener('click',function(){
foldContent.classList.toggle('open');
arrow.style.transform = foldContent.classList.contains('open') ? 'rotate(180deg)' : 'rotate(0deg)';
});
});
</script>
慕名而来，感谢楼主分享音乐 第一次听，直接爱上，谢谢 第一次听，直接爱上，谢谢 小众佳作，感谢楼主发掘分享 宝藏曲目，十分感谢楼主 曲风戳我，感谢楼主推荐 慕名而来，感谢楼主分享音乐 歌荒救星，感谢楼主推荐 挖到好听的歌，多谢楼主