屿风 发表于 2026-10-4 19:29:36

音乐带简介代码

<style>
.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:#fff;--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:#fff;--text-2:#fff;--fold-card-bg:#2d2d2d;--fold-card-text:#fff;--btn-bg:#27ae60;--btn-text:#fff;--desc-bg:#2d2d2d;--desc-text:#fff;box-shadow:0 3px 12px var(--shadow-dark);}
.theme-checkbox,.music-check{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:#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;inset: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:65%;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-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-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>Mind Games</div>
            <div class="music-meta">歌手：Sickick
所属专辑：Mind Games

发行时间：2017-11-16
发行公司： SICK UNIVERSE CORP
</div>
      </div>
    </div>
    <div class="music-desc">歌曲简介
这里可以写歌词、歌曲介绍、创作背景等。
敲回车会自动换行。
    </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=469272852&auto=0&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-4 19:30:40

<style>
.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:#fff;--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:#fff;--text-2:#fff;--fold-card-bg:#2d2d2d;--fold-card-text:#fff;--btn-bg:#27ae60;--btn-text:#fff;--desc-bg:#2d2d2d;--desc-text:#fff;box-shadow:0 3px 12px var(--shadow-dark);}
.theme-checkbox,.music-check{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:#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;inset: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:65%;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-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-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>Mind Games</div>
            <div class="music-meta">
歌手：Sickick
所属专辑：Mind Games

发行时间：2017-11-16
发行公司： SICK UNIVERSE CORP
</div>
      </div>
    </div>
    <div class="music-desc">
歌曲简介
这里可以写歌词、歌曲介绍、创作背景等。
敲回车会自动换行。
    </div>
    <div class="music-player">
      <网易云播放器位置>
    </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>
页: [1]
查看完整版本: 音乐带简介代码