奥西里斯 发表于 2026-10-5 14:53:54

【WagWan】- AThree 善意救不了旧伤

<style>
/* 音乐卡片容器 DZ内页适配 */
.music-card{
--w:600px;
--r:16px;
--shadow-light:rgba(0,0,0,0.12);
--shadow-dark:rgba(0,0,0,0.35);
/* 间距变量，直接在这里修改距离 */
--cover-info-gap:75px;      /* 封面与右侧歌曲信息横向间距 */
--cover-top-bottom-gap:15px;/* 封面容器上下外边距 */
--row-desc-gap:30px;      /* 封面行 和 下方简介卡片 上下间距 */
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-card-bg:#f1f1f1;
--fold-card-text:#000;
--btn-bg:#2ecc71;
--btn-text:#ffffff;
--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:#ffffff;
--text-2:#ffffff;
--fold-card-bg:#2d2d2d;
--fold-card-text:#ffffff;
--btn-bg:#27ae60;
--btn-text:#ffffff;
--desc-bg:#2d2d2d;
--desc-text:#ffffff;
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:var(--cover-info-gap);
align-items:flex-start;
margin:var(--cover-top-bottom-gap) 0;
margin-bottom:var(--row-desc-gap);
}

/* 封面外层容器 */
.music-cover-wrap{
position:relative;
width:200px;
height:200px;
flex-shrink:0;
}

/* 黑胶唱片：右后方 */
.vinyl-record{
position:absolute;
top:50%;
right:-30px;
transform:translateY(-50%);
width:200px;
height:200px;
border-radius:50%;
background-color:#111;
background-image:
    radial-gradient(circle at center,
      #111 0 18%,
      #2a2a2a 19% 22%,
      #111 23% 32%,
      #2a2a2a 33% 36%,
      #111 37% 46%,
      #2a2a2a 47% 50%,
      #111 51% 60%,
      #2a2a2a 61% 70%,
      #111 71% 100%);
box-shadow:0 4px 14px rgba(0,0,0,0.4);
z-index:1;
}
.vinyl-record::before{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:26px;
height:26px;
border-radius:50%;
background:linear-gradient(135deg,#ffd166,#ff9f43);
box-shadow:inset 0 0 0 3px #111;
}
.vinyl-record::after{
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:5px;
height:5px;
border-radius:50%;
background:#111;
z-index:3;
}

/* 专辑封面：圆角 + 反光折射层 */
.music-cover{
position:absolute;
top:0;
left:0;
width:200px;
height:200px;
border-radius:14px;
overflow:hidden;
z-index:2;
box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.music-cover img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}

/* 封面反光折射效果 */
.cover-reflection{
position:absolute;
inset:0;
border-radius:14px;
z-index:3;
pointer-events:none;
background:
    linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0) 50%),
    linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.18) 55%, rgba(255,255,255,0) 70%);
mix-blend-mode:screen;
opacity:0.55;
}

/* 折射高光条 */
.cover-reflection::before{
content:"";
position:absolute;
top:-20%;
left:-10%;
width:45%;
height:140%;
background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 45%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.25) 55%, rgba(255,255,255,0) 100%);
transform:skewX(-12deg);
filter:blur(0.6px);
}

/* 底部轻微折射暗边，增强玻璃感 */
.cover-reflection::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:30%;
background:linear-gradient(to top, rgba(0,0,0,0.18), rgba(0,0,0,0));
pointer-events:none;
}

.music-info{flex:1;}

/* VIP椭圆标识 */
.vip-badge{
display:inline-block;
vertical-align:middle;
margin-right:8px;
margin-bottom:4px;
padding:2px 8px;
border-radius:999px;
background:linear-gradient(135deg,#ffd166,#ff9f43);
color:#fff;
font-size:12px;
font-weight:700;
letter-spacing:1px;
white-space:nowrap;
}

/* 歌名区域 */
.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:0;
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{
width:100%;
height:62px;
border-radius:8px;
overflow:hidden;
margin-top:16px;
box-shadow:none !important;
}
.music-player iframe{
width:100%;
height:100%;
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-card-bg);
padding:10px 14px;
}
.music-check{display:none;}
.music-label{
display:block;
width:100%;
cursor:pointer;
color:var(--fold-card-text);
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:var(--btn-bg);
color:var(--btn-text);
text-decoration:none !important;
border-radius:999px;
font-size:15px;
font-weight:500;
transition:opacity 0.2s;
}
.music-link:hover{opacity:0.85;color:var(--btn-text);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>

    <div class="music-row">
      <div class="music-cover-wrap">
            <!-- 黑胶唱片 -->
            <div class="vinyl-record"></div>

            <!-- 专辑封面 -->
            <div class="music-cover">

               <span class="cover-reflection"></span>
            </div>
      </div>

      <div class="music-info">
            <div class="music-name"><span class="vip-badge">VIP</span>WagWan</div>
            <div class="music-meta">
歌手：AThree
所属专辑：WagWan

发行时间：2025-08-18
发行公司：Go East Music Enertainment Consulting Limited
</div>
      </div>
    </div>

    <div class="music-desc">专辑介绍：
“WagWan”是一张展现真实与自我探索的Mixtape，它通过九首歌带领听众走进一段关于欲望、挣扎与成长的旅程。在这张Mixtape里，音乐不再只是娱乐，它是一种情感的表达，一种对生活深刻的观察。从对金钱和成名的追逐，到面对孤独与焦虑时的自我反思，这张Mixtape带来的是一个人内心的真实写照。

专辑的每一首歌都有它独特的情感和节奏。Afro的舒缓与Trap的节奏感，Hardcore rap的直白与Emo rap的脆弱，在这些不同风格之间，展现出内心的矛盾和冲突，没有任何修饰，只是直接地表达那些在日常生活中积压的情绪。它讲述的是现代生活的复杂：在不断被外界和内心拉扯的过程中，我们如何坚持做自己，如何在喧嚣中找到属于自己的节奏。

“WagWan”并不是一张完美无缺的Mixtape，它更像是一面镜子，映照出每个人在面对欲望与挑战时的真实面貌。它没有做作的高光时刻，也没有一帆风顺的故事，只有在迷茫中前行、在挣扎中寻找到的一丝光明。在这张Mixtape里，金钱与名声并非终极目标，而是生活中不可避免的部分；它们既是动力，也是困扰。每一首歌，都是一次心灵的释放，让人感受到在这复杂世界中坚持自我的力量。

这张Mixtape不会告诉你如何改变世界，它只是告诉你，在面对一切纷扰时，最重要的始终是坚持做自己，走自己的路。
    </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=2736432331&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="音乐地址" target="_blank" class="music-link">点击跳转至音乐链接页面</a>
            </div>
      </div>
    </div>
</div>

皮囊 发表于 2026-10-5 14:54:55

宝藏曲目，十分感谢楼主

Sophia 发表于 2026-10-5 14:55:32

找了很久这首音乐，终于找到了！

爱冒险的梦 发表于 2026-10-5 14:55:46

第一次听，直接爱上，谢谢

恶魔梓 发表于 2026-10-5 14:56:03

听觉享受，辛苦楼主搬运

映画风象 发表于 2026-10-5 14:56:34

感谢楼主分享，爱来爱了

樱井奈美 发表于 2026-10-5 14:57:36

宝藏曲目，十分感谢楼主

晚苏 发表于 2026-10-5 14:57:56

循环预定，感恩楼主分享曲目

郑囧囧 发表于 2026-10-5 14:58:36

越听越有味道，感恩分享

星河暗恋记 发表于 2026-10-5 14:59:11

慕名而来，感谢楼主分享音乐
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: 【WagWan】- AThree 善意救不了旧伤