失序者

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/3/wuxu.jpg') 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. #papa::before { position: absolute; content: url('https://638183.freep.cn/638183/t23/gif/bbb.gif'); bottom: 0; mix-blend-mode: screen;}
   
4. #sky { position: absolute; width: 100%; height: 20%; top: 0; }
   
5. #papa > svg { stroke-linecap: round; }
   
6. </style>
   
7. 
   
8. <div id="papa">
   
9.         <div id="sky"></div>
   
10.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2087973934" autoplay loop></audio>
    
11. </div>
    
12. 
    
13. <script>
    
14. 
    
15. (function() {
    
16.         let lrcAr = [ [2.82,"一颗狼星_许篮心 - 失序者",1.5], [4.34,"为什么哭泣",1.6], [6.5,"隐匿在夜里",1.7], [8.43,"兜兜转转",1.9], [10.56,"仓皇、着迷",2.0], [14.51,"无法喘息",1.2], [16.28,"无法再逃离",3.0], [22.08,"困在雾里呀",3.0], [25.91,"模糊的远方，云外山，山外云",9.8], [38.08,"连自己都看不清",3.6], [41.63,"一次次追寻，一次次，回原地",10.0], [52.80,"那就燃烧，你的恶意",3.4], [57.3,"一点点掠夺，我仅存的生机",3.7], [61.19,"炽热的我，灼伤眼睛",3.7], [65.22,"魂魄逐渐凋零，风化剥离",5.0], [70.8,"恶意嘶鸣，呼啸远去",3.9], [74.82,"一点点麻木，我刺痛的掌心",4.1], [78.91,"乌云散去，皎月盈盈",3.9], [83.02,"为何还在原地，满身泥泞",8.0], [92.39,"啊~",14.3], [125.00,"蜷缩着身体",1.0], [126.61,"攥紧过去",1.0], [127.0,"所以谁，高唱",2.9], [130.82,"荒诞的戏",2.4], [135.1,"叫嚣正义",1.3], [136.43,"剥夺我的心",2.8], [142.58,"我在雾里呀",4.4], [145.51,"模糊的记忆，云外山，山外云",10.1], [158.00,"连自己都记不清",4.0], [161.88,"一次次追寻，一次次，回原地",9.4], [171.61,"为何燃烧，你的恶意",5.0], [176.67,"一点点掠夺，我仅存的生机",4.1], [180.74,"炽热的我，灼伤眼睛",4.0], [184.92,"魂魄逐渐凋零，风化剥离",4.7], [190.58,"潮涨潮息，谁的哀鸣",4.7], [194.62,"又是谁无助，谁徒劳的奔徙",4.2], [199.19,"乌云遮蔽，血色海底",3.5], [203.26,"你说我在哪里，才能呼吸",7.4], [211.4,"你说我在哪里，才能呼吸",6.1] ];
    
17.         let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
    
18.                 js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
    
19.         let loadJs = (url,callback) => {
    
20.                 let body = document.querySelector('body'), jsNode = document.createElement('script');
    
21.                 jsNode.charset = 'utf-8';
    
22.                 jsNode.setAttribute('src', url);
    
23.                 body.appendChild(jsNode);
    
24.                 jsNode.onload = () => callback();
    
25.         };
    
26.         loadJs(js1, () => {
    
27.                 HCPlayer({
    
28.                         papa: '#papa',
    
29.                         lrcAr: lrcAr,
    
30.                         lrc_css: 'top: 20px;',
    
31.                         fs_css: 'bottom: 130px; background: transparent;',
    
32.                         player_css: 'width: 240px; height: 80px; bottom: 20px;',
    
33.                         path: 'M10 5 C10 90, 230 90 ,230 5',
    
34.                         btn: {left: 54, top: 28},
    
35.                         track: {track: '#666', prog: '#eee'},
    
36.                         img: {play: '', pause: ''}
    
37.                 });
    
38.         });
    
39. 
    
40.         loadJs(js2, () => {
    
41.                 H5lz({
    
42.                         papa: '#sky',
    
43.                         total: 40,
    
44.                         size: {width: 6, height: 6},
    
45.                         shape: {background: '', borderRadius: ''},
    
46.                         ani: 'toLeft',
    
47.                         maxTime: 30,
    
48.                         offset: {x: 0, y: 0},
    
49.                 });
    
50.         });
    
51. })();
    
52. 
    
53. </script>
    

复制代码

自由路径进度条使用规整的三次贝塞尔曲线做成，路径线条的两端呈圆形，这不是插件预设的，是通过CSS设定的线帽属性：

#papa > svg { stroke-linecap: round; }

stroke-linecap 线帽，round 圆形。除了圆形，线帽还有一个方形，square。

小文

有性格，问好先生，我喜欢！

红影

播放器按钮上面的那个动态幽灵为什么是鼠标感应的，看半天没看出来控制它的语句啊

红影

哈哈，还跑插件里折腾半天，原来这个小动图本来就是变形的，正好我鼠标移上去了，还以为是鼠标控制的呢

红影

还是这个小动图，在伪元素里使用 content 插入它，都不用定位就在按钮上方？
这个又有点迷糊。哈哈，这个小动图里的机关不少啊

红影

这个制作有意思，用这么多妖魔鬼怪来配合这首歌，很奇妙

红影

那些彩色粒子只在图片上方飘动也很漂亮。欣赏黑黑好帖

红影

马黑黑 发表于 2023-10-9 07:39
帖子代码
自由路径进度条使用规整的三次贝塞尔曲线做成，路径线条的两端呈圆形，这不是插件预设的，是通过 ...

stroke-linecap 线帽，这个也是新知识呢

马黑黑

红影 发表于 2023-10-9 11:00
stroke-linecap 线帽，这个也是新知识呢

以前讲过的

马黑黑

醉美水芙蓉 发表于 2023-10-9 11:58
那只小精灵挺不错的哦！

还好

马黑黑

小文 发表于 2023-10-9 08:09
有性格，问好先生，我喜欢！

中午好

马黑黑

红影 发表于 2023-10-9 09:27
那些彩色粒子只在图片上方飘动也很漂亮。欣赏黑黑好帖

可以通过给它们指定父元素，然后安排父元素的位置

马黑黑

红影 发表于 2023-10-9 09:26
这个制作有意思，用这么多妖魔鬼怪来配合这首歌，很奇妙

马黑黑

红影 发表于 2023-10-9 09:14
播放器按钮上面的那个动态幽灵为什么是鼠标感应的，看半天没看出来控制它的语句啊

并没有对它进行任何控制

小辣椒

哇塞~~~背景图图的精灵啊，我以为是鬼灵了怕怕的

小辣椒

黑黑又一个新的播放器分享，辛苦了

马黑黑

小辣椒 发表于 2023-10-9 13:04
哇塞~~~背景图图的精灵啊，我以为是鬼灵了怕怕的

马黑黑

小辣椒 发表于 2023-10-9 13:05
黑黑又一个新的播放器分享，辛苦了

不是呀，这个还是那个自由路径插件