月是故乡明

马黑黑

马黑黑

代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/yejk.webp') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
   
3. #sky { position: absolute; width: 400px; height: 400px; top: 0; left: 0; transform: rotate(30deg); }
   
4. </style>
   
5. 
   
6. <div id="papa">
   
7.         <div id="sky"></div>
   
8.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1965108307" autoplay loop></audio>
   
9. </div>
   
10. 
    
11. <script>
    
12. 
    
13. (function() {
    
14.         let lrcAr = [ [2,"作词 : 贺宝石/魏聪",1], [4,"作曲 : 刘成甲",1], [6,"编曲 : 六子",1], [8,"歌手 : 刘成甲 / 吴文中",1], [10,"月是故乡明",5], [84.54,"伊洛畔笔架山",8.5], [93.36,"一支诗笔大如椽",8.6], [102.3,"千古传名篇",10.5], [115.8,"过万水走千山",4.0], [120.06,"一抹浊泪迷离了你的双眼",8.0], [130.41,"过万水走千山“三吏三别”叹民怨",10.9], [143.13,"月是故乡明",3.2], [147.12,"家国掩心间",3.7], [151.38,"月是故乡明",4.0], [155.37,"家国掩心间掩心间",17.0], [187.89,"伊洛畔笔架山",3.8], [191.73,"一支诗笔大如椽",3.3], [195.72,"千古传名篇",3.7], [201.63,"梦千回思万遍",3.9], [205.83,"一曲新唱惊醒了你的乡恋",7.8], [216.15,"梦千回思万遍",4.0], [220.44,"无边广厦万家欢",7.3], [228.75,"月是故乡明",3.7], [232.95,"把酒夜无眠",3.7], [237.27,"月是故乡明",3.9], [241.26,"把酒夜无眠夜无眠",15.6], [257.16,"月是故乡明",3.7], [261.15,"春夜喜雨舞翩跹",4.1], [265.41,"月是故乡明",3.8], [269.31,"盛世明月今更圆",4.3], [274.62,"月是故乡明",3.1], [277.86,"春夜喜雨舞翩跹",4.0], [282.15,"月是故乡明",3.8], [286.11,"盛世明月今更圆",4.2], [290.31,"盛世明月今更圆",17.5] ];
    
15.         let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
    
16.                 js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
    
17.         let loadJs = (url,callback) => {
    
18.                 let body = document.querySelector('body'), jsNode = document.createElement('script');
    
19.                 jsNode.charset = 'utf-8';
    
20.                 jsNode.setAttribute('src', url);
    
21.                 body.appendChild(jsNode);
    
22.                 jsNode.onload = () => callback();
    
23.         };
    
24.         loadJs(js1, () => {
    
25.                 HCPlayer({
    
26.                         papa: '#papa',
    
27.                         lrcAr: lrcAr,
    
28.                         lrc_css: 'top: 20px;',
    
29.                         fs_css: 'transform: translate(-100px,40px); color: #eee; background: transparent;',
    
30.                         player_css: 'transform: translate(-100px,0); width: 240px; height: 240px;',
    
31.                         path: 'm120.49999,62.44911c45.55863,-128.76177 224.05876,0 0,165.55087c-224.05876,-165.55087 -45.55863,-294.31264 0,-165.55087z',
    
32.                         btn: {left: 54, top: 100},
    
33.                         track: {track: 'tan', prog: 'olive'},
    
34.                         img: {play: '', pause: ''}
    
35.                 });
    
36.         });
    
37. 
    
38.         loadJs(js2, () => {
    
39.                 H5lz({
    
40.                         papa: '#sky',
    
41.                         total: 10,
    
42.                         size: {width: 36, height: 32},
    
43.                         shape: {background: 'url("https://638183.freep.cn/638183/web/svg/yjzi1.svg") no-repeat center/cover', borderRadius: '0'},
    
44.                         ani: 'toLeft',
    
45.                         maxTime: 30,
    
46.                         offset: {x: 0, y: 0},
    
47.                 });
    
48.         });
    
49. })();
    
50. 
    
51. </script>

复制代码

梦油

祝黑黑先生中秋快乐、万事遂心。

马黑黑

梦油 发表于 2023-9-29 15:26
祝黑黑先生中秋快乐、万事遂心。

小辣椒

这个有红心路径的播放器情人节用最合适了

小辣椒

小燕子太漂亮了

小辣椒

手机欣赏很完美

马黑黑

小辣椒 发表于 2023-9-29 19:13
这个有红心路径的播放器情人节用最合适了

马黑黑

小辣椒 发表于 2023-9-29 19:15
手机欣赏很完美

应该还好

马黑黑

小辣椒 发表于 2023-9-29 19:14
小燕子太漂亮了

马黑黑

醉美水芙蓉 发表于 2023-9-29 18:26
欣赏老师佳作！

红影

有了五角星的路径，现在又有了心形路径，这个制作太漂亮了

马黑黑

红影 发表于 2023-9-29 20:37
有了五角星的路径，现在又有了心形路径，这个制作太漂亮了

这个插件支持任何路径

红影

小燕子的svg也好厉害，黑黑的帖子里都是金品啊

马黑黑

红影 发表于 2023-9-29 20:38
小燕子的svg也好厉害，黑黑的帖子里都是金品啊

银的银的，像月亮一样银白色

红影

月是故乡明，盛世明月今更圆。美丽的中秋节，美好的祝愿。欣赏黑黑好帖

马黑黑

红影 发表于 2023-9-29 20:40
月是故乡明，盛世明月今更圆。美丽的中秋节，美好的祝愿。欣赏黑黑好帖

祝中秋快乐

焱鑫磊

黑黑老师中秋快乐！

马黑黑

焱鑫磊 发表于 2023-9-29 21:45
黑黑老师中秋快乐！

同乐同乐