音乐带简介代码

屿风

VIPMind Games

歌手：Sickick 所属专辑：Mind Games 发行时间：2017-11-16 发行公司： SICK UNIVERSE CORP

歌曲简介 这里可以写歌词、歌曲介绍、创作背景等。 敲回车会自动换行。

查看歌曲链接

点击跳转至音乐链接页面

屿风

1. <style>
   
2. .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;}
   
3. .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);}
   
4. #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);}
   
5. .theme-checkbox,.music-check{display:none;}
   
6. .theme-label{display:block;text-align:right;margin-bottom:12px;cursor:pointer;user-select:none;}
   
7. .theme-icon{width:22px;height:22px;display:block;}
   
8. .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);}
   
9. .music-cover-wrap{position:relative;width:200px;height:200px;flex-shrink:0;}
   
10. .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;}
    
11. .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;}
    
12. .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;}
    
13. .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);}
    
14. .music-cover img{display:block;width:100%;height:100%;object-fit:cover;}
    
15. .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;}
    
16. .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);}
    
17. .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;}
    
18. .music-info{flex:1;}
    
19. .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;}
    
20. .music-name{font-size:18px;font-weight:600;color:var(--text-1);margin-bottom:6px;white-space:pre-line;}
    
21. .music-meta{font-size:14px;color:var(--text-2);line-height:1.6;white-space:pre-line;}
    
22. .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;}
    
23. .music-player{width:100%;height:62px;border-radius:8px;overflow:hidden;margin-top:16px;box-shadow:none !important;}
    
24. .music-player iframe{width:100%;height:100%;border:0 !important;margin:0;padding:0;aspect-ratio:unset !important;box-shadow:none !important;}
    
25. .music-fold{margin-top:12px;}
    
26. .music-fold-card{width:100%;box-sizing:border-box;border-radius:10px;background:var(--fold-card-bg);padding:10px 14px;}
    
27. .music-label{display:block;width:100%;cursor:pointer;color:var(--fold-card-text);font-size:13px;transition:background .3s,color .3s;}
    
28. .music-content{max-height:0;overflow:hidden;transition:max-height .3s ease;text-align:center;}
    
29. .music-check:checked ~ .music-content{max-height:140px;margin-top:10px;}
    
30. .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;}
    
31. .music-link:hover{opacity:0.85;color:var(--btn-text);text-decoration:none !important;}
    
32. .theme-icon-light{display:inline-block;}.theme-icon-dark{display:none;}
    
33. #theme-switch:checked ~ .music-card .theme-icon-light{display:none;}
    
34. #theme-switch:checked ~ .music-card .theme-icon-dark{display:inline-block;}
    
35. </style>
    
36. <input type="checkbox" class="theme-checkbox" id="theme-switch">
    
37. <div class="music-card">
    
38.     <label for="theme-switch" class="theme-label">
    
39.         <img src="https://www.qqmcc.net/data/attachment/album/202610/04/105259it7jschytcc1tly0.png" class="theme-icon theme-icon-light" alt="亮色">
    
40.         <img src="https://www.qqmcc.net/data/attachment/album/202610/04/105259qmuz7tpnvbua6tuu.png" class="theme-icon theme-icon-dark" alt="深色">
    
41.     </label>
    
42.     <div class="music-row">
    
43.         <div class="music-cover-wrap">
    
44.             <div class="vinyl-record"></div>
    
45.             <div class="music-cover">
    
46.                <封面位置>
    
47.                <span class="cover-reflection"></span>
    
48.             </div>
    
49.         </div>
    
50.         <div class="music-info">
    
51.             <div class="music-name"><span class="vip-badge">VIP</span>Mind Games</div>
    
52.             <div class="music-meta">
    
53. 歌手：Sickick
    
54. 所属专辑：Mind Games
    
55. 
    
56. 发行时间：2017-11-16
    
57. 发行公司： SICK UNIVERSE CORP
    
58. </div>
    
59.         </div>
    
60.     </div>
    
61.     <div class="music-desc">
    
62. 歌曲简介
    
63. 这里可以写歌词、歌曲介绍、创作背景等。
    
64. 敲回车会自动换行。
    
65.     </div>
    
66.     <div class="music-player">
    
67.         <网易云播放器位置>
    
68.     </div>
    
69.     <div class="music-fold">
    
70.         <div class="music-fold-card">
    
71.             <input type="checkbox" class="music-check" id="m-fold">
    
72.             <label for="m-fold" class="music-label">查看歌曲链接</label>
    
73.             <div class="music-content">
    
74.                 <a href="音乐地址" target="_blank" class="music-link">点击跳转至音乐链接页面</a>
    
75.             </div>
    
76.         </div>
    
77.     </div>
    
78. </div>
    

复制代码