【La pipera (Daniel Tek Edit Mix)】- DJ Sanny J / Cecilia Gayle小语种
<!-- DZ音乐卡片｜图片自适应｜可调节卡片上下外边距｜封面下方嵌入网易云外链播放器｜无JS｜修复播放器空白&高度失效｜新增歌手底部CSS折叠椭圆链接按钮 -->
<style>
/* ==========【可修改参数，仅修改此区域】========== */
.dzmusic-card-wrap {
--card-w: 500px; /* 卡片整体宽度 */
--card-radius: 20px; /* 卡片外圆角 */
--cover-radius: 16px; /* 封面图片圆角 */
--card-bg: #ffffff; /* 卡片背景色 */
--shadow-color: rgba(120,120,120,0.25);
--hover-translate: -6px; /* 悬浮上浮距离 */
--hover-brightness: 1.3;/* 悬浮图片亮度 */
--title-color: #282828;/* 歌名文字颜色 */
--artist-color: #282828; /* 歌手文字颜色 */
--inner-padding: 20px; /* 卡片内边距 */
--card-margin-top: 50px;/* 卡片距离帖子上方高度 */
--card-margin-bottom:50px;/* 卡片距离帖子下方高度 */
--player-height:60px; /* 网易云播放器高度，建议范围：60‑86px，不要小于60px */
--player-margin-top:10px;/* 封面到播放器的间距 */
/* ===== 新增折叠框变量 ===== */
--fold-gap-top:12px; /* 歌手文字到折叠框上边距 */
--fold-border-color:#e5e5e5;/* 折叠框边框颜色 */
--fold-bg:#f8f8f8; /* 折叠框背景色 */
--fold-text-color:#444; /* 折叠文字颜色 */
--oval-btn-bg:#4472ff; /* 椭圆按钮背景 */
--oval-btn-color:#fff; /* 椭圆按钮文字色 */
--oval-btn-padding:6px 18px;/* 椭圆按钮内边距 */
--fold-radius:10px; /* 折叠容器圆角 */
}
/* ============================================== */
.dzmusic-card-wrap {
width: var(--card-w);
margin: var(--card-margin-top) auto var(--card-margin-bottom);
border-radius: var(--card-radius);
background: var(--card-bg);
padding: var(--inner-padding);
box-shadow: 0 4px 14px var(--shadow-color);
transition: all 0.24s ease;
font-family: system-ui, "Microsoft Yahei", sans-serif;
box-sizing: border-box;
}
.dzmusic-card-wrap:hover {
transform: translateY(var(--hover-translate));
box-shadow: 0 10px 24px var(--shadow-color);
}
/* 封面容器：图片自适应卡片 */
.dzmusic-cover-box {
width: 100%;
border-radius: var(--cover-radius);
overflow: hidden;
filter: brightness(1);
transition: filter 0.24s ease;
}
.dzmusic-card-wrap:hover .dzmusic-cover-box {
filter: brightness(var(--hover-brightness));
}
.dzmusic-cover-box img {
width: 100%;
height: auto;
max-width: 100%;
display: block;
cursor: zoom‑in;
}
/* 网易云播放器容器【修复空白、高度变量生效】 */
.dzmusic-netease-player {
width:100%;
height: var(--player-height);
margin-top: var(--player-margin-top);
border-radius:8px;
overflow:hidden;
box-sizing: border-box;
}
.dzmusic-netease-player iframe{
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
/* 覆盖iframe标签上写死的width/height属性 */
aspect-ratio: unset !important;
}
.dzmusic-text-area {
text-align: center;
margin-top: 14px;
}
.dzmusic-songname {
color: var(--title-color);
font-size: 17px;
font-weight: 600;
margin-bottom: 4px;
}
.dzmusic-singer {
color: var(--artist-color);
font-size:14px;
}
/* ========== 新增 纯CSS折叠模块 ========== */
/* 隐藏原生checkbox */
.dzmusic-fold-checkbox {
display: none;
}
.dzmusic-fold-box {
margin-top: var(--fold-gap-top);
border:1px solid var(--fold-border-color);
border-radius: var(--fold-radius);
background:var(--fold-bg);
overflow:hidden;
}
/* 折叠点击标签 */
.dzmusic-fold-label {
display:block;
padding:8px 12px;
color:var(--fold-text-color);
font-size:13px;
cursor:pointer;
}
/* 默认折叠内容区域高度0 */
.dzmusic-fold-content {
max-height:0;
overflow:hidden;
transition: max-height 0.3s ease;
padding:0 12px;
}
/* 选中展开 */
.dzmusic-fold-checkbox:checked ~ .dzmusic-fold-content {
max-height:200px;
padding:8px 12px 12px;
}
/* 椭圆形跳转按钮，移除下划线 */
.dzmusic-oval-link {
display:inline-block;
padding: var(--oval-btn-padding);
background: var(--oval-btn-bg);
color: var(--oval-btn-color) !important;
text-decoration:none !important; /* 彻底清除下划线 */
border-radius:999px; /* 椭圆胶囊 */
font-size:13px;
transition:opacity .2s;
}
.dzmusic-oval-link:hover {
opacity:0.8;
text-decoration:none !important;
}
</style>
<div class="dzmusic-card-wrap">
<div class="dzmusic-cover-box">
<!-- 替换为你的附件标签 你的ID -->
</div>
<!-- 🎵网易云外链iframe，替换src里面歌曲ID；已删除iframe上写死的width、height，交由CSS变量控制 -->
<div class="dzmusic-netease-player">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=34892668&auto=1&height=32"></iframe>
</div>
<div class="dzmusic-text-area">
<div class="dzmusic-songname">La pipera (Daniel Tek Edit Mix)</div>
<div class="dzmusic-singer">歌手：DJ Sanny J / Cecilia Gayle</div>
<!-- ========== 新增折叠框代码块 ========== -->
<div class="dzmusic-fold-box">
<input type="checkbox" class="dzmusic-fold-checkbox" id="dzmusic-fold-01">
<label for="dzmusic-fold-01" class="dzmusic-fold-label">▼ 点击查看标签</label>
<div class="dzmusic-fold-content">
<!-- 修改href为你的目标链接，文字自定义 -->
<a href="https://music.163.com/#/song?id=34892668" target="_blank" class="dzmusic-oval-link">前往查看歌曲地址</a>
</div>
</div>
<br>
</div>
</div>
**** Hidden Message ***** 本帖最后由 QQmcc-千惠 于 2016-9-11 09:46 编辑
感谢分享 我来啦 。。 音乐记事馆
棒棒的 棒棒哒。 {:3_62:}虽然我听不到 但是看起来就很厉害了 欢迎 棒棒棒棒棒棒棒棒棒棒棒棒 互撸娃 互撸娃 小语种电锯帮帮哒