东方神韵精选（一）

马黑黑

马黑黑

帖子代码

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/6/dfuy.jpg') no-repeat center/cover; color: yellow; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     .pd-vid { opacity: 1; mix-blend-mode: screen; mask: linear-gradient(180deg, transparent 80%, red); -webkit-mask: linear-gradient(180deg, transparent 60%, red); }
   
7.     #lrc { top: 4%; }
   
8.     #msvg { position: absolute; width: 12vw; heighht: 12vw; top: 10%; transition: .75s; opacity: 1; }
   
9. </style>
   
10. 
    
11. <div id="pa" class="pa">
    
12.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/01/35/5b417f2f00d28.mp4" autoplay loop muted></video>
    
13.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    
14.         <title>播放/暂停(Alt+X)</title>
    
15.         <defs>
    
16.                     <linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
    
17.                             <stop offset="0%" stop-color="yellow"></stop>
    
18.                             <stop offset="50%" stop-color="orange"></stop>
    
19.                             <stop offset="100" stop-color="teal"></stop>
    
20.                     </linearGradient>
    
21.             </defs>
    
22.             <g id="g1" class="rotate"></g>
    
23.     </svg>
    
24. </div>
    
25. 
    
26. <script>
    
27.     var options = {
    
28.         pa: '.pa',
    
29.         urls: [
    
30.             ['https://music.163.com/song/media/outer/url?id=5275046', '深山幽谷-中音笙/二胡'],
    
31.             ['https://music.163.com/song/media/outer/url?id=5275047', '小桥流水-古筝/琵琶'],
    
32.             ['https://music.163.com/song/media/outer/url?id=5275048', '静与动-洞箫/二胡'],
    
33.             ['https://music.163.com/song/media/outer/url?id=5275049', '天上人间-排萧'],
    
34.             ['https://music.163.com/song/media/outer/url?id=5275050', '春风又回头-二胡/中音笙'],
    
35.             ['https://music.163.com/song/media/outer/url?id=5275051', '云彩浮半空-女声/中音笙'],
    
36.             ['https://music.163.com/song/media/outer/url?id=5275052', '潺潺流水-古筝/竹笛'],
    
37.             ['https://music.163.com/song/media/outer/url?id=5275053', '牵引-二胡/扬琴'],
    
38.             ['https://music.163.com/song/media/outer/url?id=5275054', '听音-中音笙/琵琶'],
    
39.             ['https://music.163.com/song/media/outer/url?id=5275055', '秋水如梦-二胡/扬琴']
    
40.         ],
    
41.         btns: [msvg]
    
42.     };
    
43. 
    
44.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    
45.         loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
46.     });
    
47. 
    
48.     function tzRun() {
    
49.         var aud = new AudPlayer(options);
    
50.         var dr = _dr(msvg);
    
51.         dr.path('M-40 -190 A90 300, 0 0 0, 40 -190 L0 0Z', 'url(#grd)', 'lightgreen', 4).addTo(g1).rotates(8);
    
52.     }
    
53. 
    
54.     function loadJs(url, callback) {
    
55.         var script = document.createElement('script');
    
56.         script.charset = 'utf-8';
    
57.         script.src = url;
    
58.         script.onload = function() {
    
59.             if (callback) callback();
    
60.         };
    
61.         document.head.appendChild(script);
    
62.     }
    
63. </script>

复制代码

梦江南

这图图真漂亮！小三角隐藏了10首音乐，黑黑老师厉害！

杨帆

视听盛宴，匠心之作，感谢示范