【I'm the One】- Justin Bieber / Lil Wayne
<!-- 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;
/* 大图弹窗参数 */
--img-max-width: 85%;
--img-max-height: 85vh;
--img-border-radius: 6px;
/* 播放器参数 */
--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;
--modal-transition-time: 0.3s;
--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;
}
/* 卡片内渲染出来的封面图 */
.vinyl-cover{
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: pointer;
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;
}
/* 封面放大弹窗 */
.img-modal{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
display:none;
justify-content:center;
align-items:center;
z-index:19999;
opacity:0;
transition: opacity var(--modal-transition-time) ease;
}
.img-modal.show{
display:flex;
opacity:1;
}
.img-modal img{
max-width:var(--img-max-width);
max-height:var(--img-max-height);
border-radius:var(--img-border-radius);
}
/* ----------------核心修复1：隐藏原始attachimg输出的图片！---------------- */
.attach-source{
display: none !important;
visibility:hidden !important;
height:0 !important;
overflow:hidden !important;
}
/* ----------------核心修复2：强制重写悬浮提示框，置顶居中，超高优先级---------------- */
.music-card-wrap .vinyl-cover + .imgtip,
.music-card-wrap .vinyl-cover:hover + .imgtip {
top: auto !important;
bottom: calc(100% + 12px) !important; /* 和图片留出安全间隙，防止贴边重叠 */
left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
z-index: 99999 !important;
}
.music-card-wrap .vinyl-cover + .imgtip::after{
top: 100% !important;
bottom: auto !important;
border-top: 8px solid #222 !important;
border-bottom: none !important;
}
</style>
<div class="music-card-wrap">
<!-- 【隐藏的附件源标签，只用来读取图片地址，不会页面显示】修改数字ID -->
<div class="attach-source">
</div>
<!-- 黑胶渲染容器（最终展示封面区域） -->
<div class="vinyl-cover-box">
<div class="vinyl-ring"></div>
<img class="vinyl-cover">
</div>
<!-- 播放器iframe -->
<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=475207448&auto=1&height=32"></iframe>
</div>
<div class="song-name">I'm the One</div>
<div class="song-author">歌手：Justin Bieber / Lil Wayne</div>
<!-- 歌词区 -->
<div class="lyric-wrap">
<div class="lyric-scroll">
<div class="lyric-content">
Miller music
We the Best Music
我们是最好的音乐
Another one!
又一首你不可错过
DJ Khaled
Yeah, you're lookin' at the truth, the money never lie, no
耶 耶 摆在你面前的是真情实意 为你挥霍的金钱不会有假
I'm the one yeah, I'm the one
就是我 别无其他
Early morning in the dawn know you wanna ride now (let's ride)
清晨天未亮 我就知道你这老司机想“开车”
I'm the one yeah (let's ride)
只有我 总能读透你的想法
I'm the one yeah
总能读透你的想法
And you sick of all those other imitators
你厌倦了那些效仿我的冒牌货
Don't let the only real one intimidate ya
但可别让我这样的正牌货对你感到不耐烦
See you watchin', don't run outta time now
见你还在张望 别再浪费时间抉择不定啦
I'm the one yeah, oh-eh-oh-oh-oh, eh-oh
我就是你的真命天子
I'm the one, oh-eh-oh-oh-oh, eh-oh
只有我能让你称心如意
I'm the only one, oh-eh-oh-oh-oh, eh-oh
我才是你命中的唯一
I'm the one, oh-eh-oh-oh-oh, eh-oh
只有我能让你称心如意
I'm the only one
我才是你命中的唯一
</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>
<!-- 大图弹窗 -->
<div class="img-modal">
<img id="modalImg">
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
// 从隐藏的自动读取图片地址
const sourceImg = document.querySelector('.attach-source img');
const coverImg = document.querySelector('.vinyl-cover');
if(sourceImg){
coverImg.src = sourceImg.src;
coverImg.classList.add('rotate-active');
}
const modal = document.querySelector('.img-modal');
const modalImg = document.getElementById('modalImg');
const foldTitle = document.querySelector('.fold-title');
const foldContent = document.querySelector('.fold-content');
const arrow = foldTitle.querySelector('.arrow');
// 点击封面弹出大图
coverImg.addEventListener('click',function(){
modalImg.src = this.src;
modal.classList.add('show');
});
// 双击启停旋转
coverImg.addEventListener('dblclick',function(e){
e.preventDefault();
this.classList.toggle('rotate-active');
});
// 关闭弹窗
modal.addEventListener('click',function(){
modal.classList.remove('show');
});
// 折叠面板切换
foldTitle.addEventListener('click',function(){
foldContent.classList.toggle('open');
arrow.style.transform = foldContent.classList.contains('open') ? 'rotate(180deg)' : 'rotate(0deg)';
});
});
</script> 第一次听，直接爱上，谢谢 挖到好听的歌，多谢楼主 曲风很棒，感谢楼主分享！ 循环预定，感恩楼主分享曲目 氛围感拉满，感谢分享！ 恰到好处的旋律，谢谢楼主 太对胃口了，感谢分享音乐 一直找这首歌，终于等到 循环预定，感恩楼主分享曲目