音乐发帖明暗主题

屿风

Put It Up (feat. Rihanna)

歌手：Chris Brown / Rihanna

查看音乐地址链接

点击跳转至音乐链接页面

屿风

1. <style>
   
2. .music-card{
   
3.     --w:480px;--r:16px;
   
4.     --shadow-light:rgba(0,0,0,0.10);--shadow-dark:rgba(0,0,0,0.30);
   
5.     --bg:#fff;--text-1:#1d2129;--text-2:#4e5969;--card-border:#f2f3f5;
   
6.     --primary:#ff7d37;--primary-light:#fff0e8;--fold-btn-bg:#f2f3f5;--fold-btn-color:#1d2129;
   
7.     width:var(--w);max-width:100%;margin:30px auto;
   
8.     padding:18px 18px 35px 18px;border-radius:var(--r);box-sizing:border-box;
   
9.     font-family:system-ui,Microsoft Yahei,sans-serif;
   
10.     transition:background .3s ease,color .3s,box-shadow .3s;
    
11.     background:var(--bg);box-shadow:0 4px 14px var(--shadow-light);border:1px solid var(--card-border);
    
12. }
    
13. #theme-switch:checked ~ .music-card{
    
14.     --bg:#17171a;--text-1:#f2f3f5;--text-2:#b0b8c4;--card-border:#2c2c32;
    
15.     --primary:#ff945a;--primary-light:#2c2320;--fold-btn-bg:#2c2c32;--fold-btn-color:#f2f3f5;
    
16.     box-shadow:0 4px 14px var(--shadow-dark);border:1px solid var(--card-border);
    
17. }
    
18. .theme-checkbox,.music-check{display:none;}
    
19. .theme-label{display:block;text-align:right;margin-bottom:10px;cursor:pointer;user-select:none;}
    
20. .theme-icon{width:22px;height:22px;display:block;}
    
21. .music-cover{width:100%;border-radius:12px;overflow:hidden;}
    
22. .music-cover img{width:100%;height:auto;display:block;}
    
23. .music-txt{text-align:center;margin:14px 0;}
    
24. .music-name{font-size:16px;font-weight:600;color:var(--text-1);margin-bottom:4px;}
    
25. .music-artist{font-size:14px;color:var(--text-2);}
    
26. .music-player{width:100%;height:62px;border-radius:8px;overflow:hidden;}
    
27. .music-player iframe{width:100%;height:100%;border:0;margin:0;padding:0;aspect-ratio:unset !important;}
    
28. .music-fold{margin-top:12px;text-align:center;}
    
29. .music-label{display:inline-block;padding:6px 14px;background:var(--fold-btn-bg);border-radius:99px;font-size:13px;cursor:pointer;color:var(--fold-btn-color);transition:background .3s ease,color .3s ease;}
    
30. .music-label:hover{background:var(--primary-light);color:var(--primary);}
    
31. .music-content{max-height:0;overflow:hidden;transition:max-height .3s ease;}
    
32. .music-check:checked ~ .music-content{max-height:120px;margin-top:10px;}
    
33. .music-link{display:inline-block;padding:5px 16px;background:var(--primary);color:#fff !important;text-decoration:none !important;border-radius:999px;font-size:13px;transition:opacity .25s ease;}
    
34. .music-link:hover{opacity:0.85;color:#fff;text-decoration:none !important;}
    
35. .theme-icon-light{display:inline-block;}
    
36. .theme-icon-dark{display:none;}
    
37. #theme-switch:checked ~ .music-card .theme-icon-light{display:none;}
    
38. #theme-switch:checked ~ .music-card .theme-icon-dark{display:inline-block;}
    
39. </style>
    
40. <input type="checkbox" class="theme-checkbox" id="theme-switch">
    
41. <div class="music-card">
    
42.     <label for="theme-switch" class="theme-label">
    
43.         <img src="https://www.qqmcc.net/data/attachment/album/202610/04/105259it7jschytcc1tly0.png" class="theme-icon theme-icon-light" alt="亮色">
    
44.         <img src="https://www.qqmcc.net/data/attachment/album/202610/04/105259qmuz7tpnvbua6tuu.png" class="theme-icon theme-icon-dark" alt="深色">
    
45.     </label>
    
46.     <div class="music-cover">
    
47.        <上传图片封面替换>
    
48.     </div>
    
49.     <div class="music-txt">
    
50.         <div class="music-name">Put It Up (feat. Rihanna)</div>
    
51.         <div class="music-artist">歌手：Chris Brown / Rihanna</div>
    
52.     </div>
    
53.     <div class="music-player">
    
54.         <网易云音乐播放器外链替换>
    
55.     </div>
    
56.     <div class="music-fold">
    
57.         <input type="checkbox" class="music-check" id="m-fold">
    
58.         <label for="m-fold" class="music-label"> 查看链接</label>
    
59.         <div class="music-content">
    
60.             <a href="替换音乐地址链接" target="_blank" class="music-link">点击跳转至音乐链接页面</a>
    
61.         </div>
    
62.     </div>
    
63. </div>
    

复制代码