【U Make Me Wanna】- Blue 经典再现
<style>.music-card{
--w:600px;
--r:16px;
--shadow-light:rgba(0,0,0,0.12);
--shadow-dark:rgba(0,0,0,0.35);
width:var(--w);
max-width:100%;
margin:20px auto;
padding:18px;
border-radius:var(--r);
box-sizing:border-box;
font-family:system-ui,Microsoft Yahei,sans-serif;
transition:background .3s,color .3s;
}
.music-card{
--bg:#fff;
--text-1:#222;
--text-2:#555;
--fold-btn-bg:#f1f1f1;
--fold-btn-color:#000;
--desc-bg:#f7f7f7;
--desc-text:#444;
background:var(--bg);
box-shadow:0 3px 12px var(--shadow-light);
}
#theme-switch:checked ~ .music-card{
--bg:#1f1f1f;
--text-1:#f0f0f0;
--text-2:#b8b8b8;
--fold-btn-bg:#ffbc88;
--fold-btn-color:#fff;
--desc-bg:#2d2d2d;
--desc-text:#ddd;
box-shadow:0 3px 12px var(--shadow-dark);
}
.theme-checkbox{display:none;}
.theme-label{display:block;text-align:right;margin-bottom:12px;cursor:pointer;user-select:none;}
.theme-icon{width:22px;height:22px;display:block;}
.music-row{display:flex;gap:16px;align-items:flex-start;}
.music-cover{
width:200px;
height:200px;
border-radius:12px;
overflow:hidden;
flex-shrink:0;
}
.music-cover img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.music-info{flex:1;}
.music-name{
font-size:18px;
font-weight:600;
color:var(--text-1);
margin-bottom:6px;
white-space:pre-line;
}
.music-meta{
font-size:14px;
color:var(--text-2);
line-height:1.6;
white-space:pre-line;
}
.music-desc{
width:100%;
margin-top:16px;
padding:12px 14px;
border-radius:10px;
background:var(--desc-bg);
color:var(--desc-text);
font-size:14px;
line-height:1.7;
box-sizing:border-box;
white-space:pre-line;
}
.music-player iframe{
width:100%;
height:40px
border:0 !important;
margin:0;
padding:0;
aspect-ratio:unset !important;
box-shadow:none !important;
}
.music-fold{margin-top:12px;}
.music-fold-card{
width:100%;
box-sizing:border-box;
border-radius:10px;
background:var(--fold-btn-bg);
padding:10px 14px;
}
.music-check{display:none;}
.music-label{
display:block;
width:100%;
cursor:pointer;
color:var(--fold-btn-color);
font-size:13px;
transition:background .3s,color .3s;
}
.music-content{
max-height:0;
overflow:hidden;
transition:max-height .3s ease;
text-align:center;
}
.music-check:checked ~ .music-content{
max-height:140px;
margin-top:10px;
}
.music-link{
display:inline-block;
padding:8px 24px;
background:#ffbc88;
color:#fff;
text-decoration:none !important;
border-radius:999px;
font-size:15px;
font-weight:500;
}
.music-link:hover{opacity:0.8;color:#fff;text-decoration:none !important;}
.theme-icon-light{display:inline-block;}
.theme-icon-dark{display:none;}
#theme-switch:checked ~ .music-card .theme-icon-light{display:none;}
#theme-switch:checked ~ .music-card .theme-icon-dark{display:inline-block;}
</style>
<input type="checkbox" class="theme-checkbox" id="theme-switch">
<div class="music-card">
<label for="theme-switch" class="theme-label">
<img src="https://www.qqmcc.net/data/attachment/album/202610/04/105259it7jschytcc1tly0.png" class="theme-icon theme-icon-light" alt="亮色">
<img src="https://www.qqmcc.net/data/attachment/album/202610/04/105259qmuz7tpnvbua6tuu.png" class="theme-icon theme-icon-dark" alt="深色">
</label>
<!-- 左右布局：左封面｜右歌曲信息，attachimg附件标签，顶部对齐 -->
<div class="music-row">
<div class="music-cover">
</div>
<div class="music-info">
<div class="music-name">U Make Me Wanna</div>
<div class="music-meta">歌手：Blue
所属专辑：One Love
发行时间：2002-11-04
发行公司： 环球唱片
</div>
</div>
</div>
<!-- 文本描述卡片 -->
<div class="music-desc">
《U Make Me Wanna》歌曲介绍
歌手：Blue（英国男子流行组合）
专辑：《One Love》
词曲：Robson / McLaughlin / Wilkins
曲风：流行、欧陆流行（Europop）
歌曲简介
这是英国男子组合 Blue 的经典作品，收录在他们第二张录音室专辑《One Love》，是专辑推出的第三支单曲。歌曲在英国单曲榜最高冲到第 4 名，是 2000 年代欧美男团热门金曲，旋律轻快抓耳，和声细腻，讲述心动爱慕的浪漫情愫。
组合简介
Blue 是 2000 年初爆红的英国男子四人团体，成员：Simon Webbe、Duncan James、Lee Ryan、Antony Costa。擅长优美的人声和声，代表作还有《One Love》《All Rise》，是一代人的欧美流行回忆。
歌词主题
歌词描绘一段慢慢萌生的爱意：偶然梦见彼此，鼓起勇气写下这首歌，向心仪的人诉说心动，表达 “你让我情不自禁” 的喜欢。
</div>
<!-- 播放器区域 -->
<div class="music-player">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=2010944115&auto=1&height=32"></iframe>
</div>
<!-- 底部通栏卡片 -->
<div class="music-fold">
<div class="music-fold-card">
<input type="checkbox" class="music-check" id="m-fold">
<label for="m-fold" class="music-label">查看歌曲链接</label>
<div class="music-content">
<a href="https://music.163.com/#/song?id=2010944115" target="_blank" class="music-link">点击跳转至音乐链接页面</a>
</div>
</div>
</div>
</div>
第一次听，直接爱上，谢谢 一直找这首歌，终于等到 慕名而来，感谢楼主分享音乐 音色绝了，多谢用心整理 整个论坛就爱你的分享，亲亲~ 找了很久这首音乐，终于找到了！ 歌荒救星，感谢楼主推荐 氛围感拉满，感谢分享！ 挖到好听的歌，多谢楼主