音乐帖浮动代码

屿风

歌名

歌手

点击查看链接

前往查看歌曲链接地址

屿风

白色版本-如上效果

1. <style>
   
2. .dzmusic-card-wrap{
   
3.     --card-w:500px;--card-radius:20px;--cover-radius:16px;--card-bg:#fff;
   
4.     --shadow:rgba(120,120,120,.25);--hover-up:-6px;--hover-bright:1.3;
   
5.     --title:#232323;--artist:#232323;--pad:20px;--mt:50px;--mb:50px;
   
6.     --player-h:60px;--player-top:10px;--fold-top:12px;--fold-border:#282828;
   
7.     --fold-bg:#f8f8f8;--fold-text:#444;--btn-bg:#282828;--btn-color:#fff;
   
8.     --btn-pad:6px 18px;--fold-r:10px;
   
9. 
   
10.     width:var(--card-w);margin:var(--mt) auto var(--mb);border-radius:var(--card-radius);
    
11.     background:var(--card-bg);padding:var(--pad);box-shadow:0 4px 14px var(--shadow);
    
12.     transition:all .80s ease;font-family:system-ui,"Microsoft Yahei",sans-serif;box-sizing:border-box;
    
13. }
    
14. .dzmusic-card-wrap:hover{transform:translateY(var(--hover-up));box-shadow:0 10px 24px var(--shadow);}
    
15. .dzmusic-cover-box{width:100%;border-radius:var(--cover-radius);overflow:hidden;filter:brightness(1);transition:filter .80s ease;}
    
16. .dzmusic-card-wrap:hover .dzmusic-cover-box{filter:brightness(var(--hover-bright));}
    
17. .dzmusic-cover-box img{width:100%;height:auto;max-width:100%;display:block;cursor:zoom-in;}
    
18. .dzmusic-netease-player{width:100%;height:var(--player-h);margin-top:var(--player-top);border-radius:8px;overflow:hidden;box-sizing:border-box;}
    
19. .dzmusic-netease-player iframe{width:100%;height:100%;border:none;margin:0;padding:0;aspect-ratio:unset !important;}
    
20. .dzmusic-text-area{text-align:center;margin-top:14px;}
    
21. .dzmusic-songname{color:var(--title);font-size:17px;font-weight:600;margin-bottom:4px;}
    
22. .dzmusic-singer{color:var(--artist);font-size:14px;}
    
23. .dzmusic-fold-checkbox{display:none;}
    
24. .dzmusic-fold-box{margin-top:var(--fold-top);border:1px solid var(--fold-border);border-radius:var(--fold-r);background:var(--fold-bg);overflow:hidden;}
    
25. .dzmusic-fold-label{display:block;padding:8px 12px;color:var(--fold-text);font-size:13px;cursor:pointer;}
    
26. .dzmusic-fold-content{max-height:0;overflow:hidden;transition:max-height .8s ease;padding:0 12px;}
    
27. .dzmusic-fold-checkbox:checked~.dzmusic-fold-content{max-height:200px;padding:8px 12px 12px;}
    
28. .dzmusic-oval-link{display:inline-block;padding:var(--btn-pad);background:var(--btn-bg);color:var(--btn-color)!important;text-decoration:none!important;border-radius:999px;font-size:13px;transition:opacity .8s;}
    
29. .dzmusic-oval-link:hover{opacity:.8;text-decoration:none!important;}
    
30. </style>
    
31. <div class="dzmusic-card-wrap">
    
32.     <div class="dzmusic-cover-box"><封面位置></div>
    
33.     <div class="dzmusic-netease-player"><播放器位置></div>
    
34.     <div class="dzmusic-text-area">
    
35.         <div class="dzmusic-songname">歌名</div>
    
36.         <div class="dzmusic-singer">歌手</div>
    
37.         <div class="dzmusic-fold-box">
    
38.             <input type="checkbox" class="dzmusic-fold-checkbox" id="dzmusic-fold-01">
    
39.             <label for="dzmusic-fold-01" class="dzmusic-fold-label">点击查看链接</label>
    
40.             <div class="dzmusic-fold-content">
    
41.                 <a href="音乐地址" target="_blank" class="dzmusic-oval-link">前往查看歌曲链接地址</a>
    
42.             </div>
    
43.         </div>
    
44. <br>
    
45.     </div>
    
46. </div>
    

复制代码

屿风

暗色版本

1. <style>
   
2. .dzmusic-card-wrap{
   
3.     --card-w:500px;--card-radius:20px;--cover-radius:16px;--card-bg:#1e1e26;
   
4.     --shadow:rgba(0,0,0,.35);--hover-up:-6px;--hover-bright:1.2;
   
5.     --title:#f1f1f1;--artist:#b8b8c8;--pad:20px;--mt:50px;--mb:50px;
   
6.     --player-h:60px;--player-top:10px;--fold-top:12px;--fold-border:#444;
   
7.     --fold-bg:#2a2a34;--fold-text:#d2d2e0;--btn-bg:#484858;--btn-color:#fff;
   
8.     --btn-pad:6px 18px;--fold-r:10px;
   
9. 
   
10.     width:var(--card-w);margin:var(--mt) auto var(--mb);border-radius:var(--card-radius);
    
11.     background:var(--card-bg);padding:var(--pad);box-shadow:0 4px 14px var(--shadow);
    
12.     transition:all .80s ease;font-family:system-ui,"Microsoft Yahei",sans-serif;box-sizing:border-box;
    
13. }
    
14. .dzmusic-card-wrap:hover{transform:translateY(var(--hover-up));box-shadow:0 10px 24px var(--shadow);}
    
15. .dzmusic-cover-box{width:100%;border-radius:var(--cover-radius);overflow:hidden;filter:brightness(1);transition:filter .80s ease;}
    
16. .dzmusic-card-wrap:hover .dzmusic-cover-box{filter:brightness(var(--hover-bright));}
    
17. .dzmusic-cover-box img{width:100%;height:auto;max-width:100%;display:block;cursor:zoom-in;}
    
18. .dzmusic-netease-player{width:100%;height:var(--player-h);margin-top:var(--player-top);border-radius:8px;overflow:hidden;box-sizing:border-box;}
    
19. .dzmusic-netease-player iframe{width:100%;height:100%;border:none;margin:0;padding:0;aspect-ratio:unset !important;}
    
20. .dzmusic-text-area{text-align:center;margin-top:14px;}
    
21. .dzmusic-songname{color:var(--title);font-size:17px;font-weight:600;margin-bottom:4px;}
    
22. .dzmusic-singer{color:var(--artist);font-size:14px;}
    
23. .dzmusic-fold-checkbox{display:none;}
    
24. .dzmusic-fold-box{margin-top:var(--fold-top);border:1px solid var(--fold-border);border-radius:var(--fold-r);background:var(--fold-bg);overflow:hidden;}
    
25. .dzmusic-fold-label{display:block;padding:8px 12px;color:var(--fold-text);font-size:13px;cursor:pointer;}
    
26. .dzmusic-fold-content{max-height:0;overflow:hidden;transition:max-height .8s ease;padding:0 12px;}
    
27. .dzmusic-fold-checkbox:checked~.dzmusic-fold-content{max-height:200px;padding:8px 12px 12px;}
    
28. .dzmusic-oval-link{display:inline-block;padding:var(--btn-pad);background:var(--btn-bg);color:var(--btn-color)!important;text-decoration:none!important;border-radius:999px;font-size:13px;transition:opacity .8s;}
    
29. .dzmusic-oval-link:hover{opacity:.8;text-decoration:none!important;}
    
30. </style>
    
31. <div class="dzmusic-card-wrap">
    
32.     <div class="dzmusic-cover-box"><封面位置></div>
    
33.     <div class="dzmusic-netease-player"><播放器位置></div>
    
34.     <div class="dzmusic-text-area">
    
35.         <div class="dzmusic-songname">歌名</div>
    
36.         <div class="dzmusic-singer">歌手</div>
    
37.         <div class="dzmusic-fold-box">
    
38.             <input type="checkbox" class="dzmusic-fold-checkbox" id="dzmusic-fold-01">
    
39.             <label for="dzmusic-fold-01" class="dzmusic-fold-label">点击查看链接</label>
    
40.             <div class="dzmusic-fold-content">
    
41.                 <a href="音乐地址" target="_blank" class="dzmusic-oval-link">前往查看歌曲链接地址</a>
    
42.             </div>
    
43.         </div>
    
44. <br>
    
45.     </div>
    
46. </div>
    

复制代码