伤逝

马黑黑

马黑黑

帖子代码

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.   .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/sg.webp') no-repeat center/cover; color: white; }
   
4.   .pa::after { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/w8/c5.webp') no-repeat center/cover; -webkit-mask: linear-gradient(60deg, red 40%, transparent 60%, transparent 80%, red); mask: linear-gradient(60deg, red 40%, transparent 60%, transparent 80%, red); z-index: -1; }
   
5.   .player { width: 480px; bottom: 10px; }
   
6.   .btnFs { top: 25px; right: 20px; }
   
7.   #msvg { position: absolute; bottom: 60px; width: 12vw; heighht: 12vw; opacity: var(--opacity); }
   
8. </style>
   
9. 
   
10. <div id="pa" class="pa">
    
11.   <video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/08/50/5d24ac1d41cf5.mp4" autoplay loop muted></video>
    
12.   <svg id="msvg" class="rot sepia" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    
13.     <title>播放/暂停(Alt+X)</title>
    
14.   </svg>
    
15. </div>
    
16. 
    
17. <script>
    
18.   var options = {
    
19.     pa: '.pa',
    
20.     urls: [['https://music.163.com/song/media/outer/url?id=169219', '伤逝']],
    
21.     btns: [msvg],
    
22.   };
    
23. 
    
24.   loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
    
25.     loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
26.   });
    
27. 
    
28.   function tzRun() {
    
29.     var aud = new AudPlayer(options);
    
30.     var dr = _dr(msvg);
    
31.     dr.gradient('radialGradient', {id: 'grd', cx: 0.45, cy: 0.25, r: 0.4}, [['cyan', 0.25], ['teal', 0.55], ['silver', 0.85]]);
    
32.     dr.path('M0 -190 Q80 0,0 190 Q-80 0,0 -190', 'transparent', 'url(#grd)', 5, 'round').rotates(5, 180);
    
33.   }
    
34. 
    
35.   function loadJs(url, callback) {
    
36.     var script = document.createElement('script');
    
37.     script.charset = 'utf-8';
    
38.     script.src = url;
    
39.     script.onload = function() {
    
40.       if (callback) callback();
    
41.     };
    
42.     document.head.appendChild(script);
    
43.   }
    
44. </script>

复制代码

马黑黑

本帖：

（一）使用 audioplayer 制作单曲帖子（参见代码第 20 行）；

（二）使用 svg 做自定义添加音频控制器（兼顾美化帖子之用，参见代码 12~14 行、25行、30~32行）；

（三）使用 CSS mask 属性融合两张帖子背景图片（参见代码 03~04行）。

关于 mask：

mask 属性自 chrome 120 起均以完美支持，但为考虑兼容 120- 版本，仍需提供 -webkit- 前缀。通常的做法是带前缀的放前面，不带前缀的放后面。

小辣椒

伤感音乐，容易打动人心

小辣椒

欣赏黑黑好制作，小辣椒欣赏加学习