思念拟人化

马黑黑

马黑黑

帖子使用高能电饭煲制作，生成代码后略作修改：

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
   
3.   .pa { --bg: url('https://638183.freep.cn/638183/t24/w8/xlnm.webp') no-repeat center/cover, linear-gradient(to top right, lightblue, aliceblue, purple); background-blend-mode: multiply; }
   
4.   .vid { top: 15%; left: 25%; width: 20vw; height: 20vw; border-radius: 50%; cursor: pointer; }
   
5.   .fadeInLrc { left: 60px; letter-spacing: 4px; writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0; }
   
6. </style>
   
7. 
   
8. <div class="pa"></div>
   
9. 
   
10. <script>
    
11. var gc = `
    
12. [00:00.300]孟慧圆『想念拟人化』
    
13. [00:11.244]有时我怀疑想念
    
14. [00:17.451]也住在这个房间
    
15. [00:23.623]只是我 没看见
    
16. [00:28.904]难得有位朋友了解
    
17. [00:35.649]遇上爱的小改变
    
18. [00:41.730]自己都不太察觉
    
19. [00:47.828]和想念 聊聊天
    
20. [00:53.097]笑容很甜 幸福多明显
    
21. [00:59.078]偶尔好几天
    
22. [01:02.029]想念没出现
    
23. [01:05.762]我偷偷流过泪
    
24. [01:11.212]后来听寂寞
    
25. [01:14.260]说原来想念
    
26. [01:18.778]也一样失眠
    
27. [01:23.046]你留下来的想念 还在房间
    
28. [01:29.361]整理一遍又一遍又一遍
    
29. [01:35.379]爱情是一种抗体 还是病原
    
30. [01:42.188]复原 要一点时间
    
31. [01:47.408]你留下来的想念 在心里面
    
32. [01:53.684]整理一遍又一遍又一遍
    
33. [02:00.042]爱情是你的抗体 我的病原
    
34. [02:06.521]复原 不仅是时间
    
35. [02:24.936]遇上爱的小改变
    
36. [02:30.800]自己都不太察觉
    
37. [02:37.152]和想念 聊聊天
    
38. [02:41.762]笑容很甜 幸福多明显
    
39. [02:48.312]偶尔好几天
    
40. [02:51.361]想念没出现
    
41. [02:54.361]我偷偷流过泪
    
42. [03:00.456]后来听寂寞
    
43. [03:03.718]说原来想念
    
44. [03:07.770]也一样失眠
    
45. [03:12.336]你留下来的想念 还在房间
    
46. [03:18.722]整理一遍又一遍又一遍
    
47. [03:25.200]爱情是一种抗体 还是病原
    
48. [03:31.557]复原 要一些时间
    
49. [03:36.656]你留下来的想念 在心里面
    
50. [03:42.941]整理一遍又一遍又一遍
    
51. [03:49.524]爱情是你的抗体 我的病原
    
52. [03:55.889]复原 不仅是时间
    
53. [04:10.441]吉他：高飞
    
54. [04:11.328]录音：时俊峰@福达studio
    
55. [04:12.123]秦孟达@造音studio
    
56. [04:12.973]Vocal editor：曾嵘
    
57. [04:14.191]混音：仓雁彬@KCYB studio
    
58. `;
    
59.   var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz.v5.min.js?v=1';
    
60.   loadJs(jsFile, tzInit);
    
61. 
    
62.   function loadJs(url, callback) {
    
63.     const script = document.createElement('script');
    
64.     script.charset = 'utf-8';
    
65.     script.src = url;
    
66.     script.defer = true;
    
67.     script.onload = callback;
    
68.     document.head.appendChild(script);
    
69.   }
    
70. 
    
71.   function tzInit() {
    
72.     var tz = TZ('pa');
    
73.     tz.add('audio', '', '', { src: 'https://music.163.com/song/media/outer/url?id=1379662223' });
    
74.     tz.add('video', '', 'vid ma', {
    
75.         src: 'https://img.tukuppt.com/video_show/2629112/00/02/33/5b570a3513f28.mp4',
    
76.         poster: 'https://638183.freep.cn/638183/small/envelop.jpg',
    
77.         disablePictureInPicture: true
    
78.     }).playmp3();
    
79. 
    
80.     tz.bgprog().style('bottom: 40px; color: pink; width: 240px;');
    
81.     tz.lrc(tz.lrc2HC(gc), '', true);
    
82.     tz.fs().style('left: 20px; bottom: 20px; color: purple; background: none;');
    
83.     tz.autoMid();
    
84.   }
    
85. </script>

复制代码

修改的部分主要是视频播放器，tz.add('video', ...) 指令语句：加一个 ma 类列表属性、句末分号前加 .playmp3() 指令。

另外，需要特别说明的是：LRC歌词如果启用淡入效果，则它对应的 CSS 选择器应为 .fadeInLrc（代码在第6行）。

梦江南

黑黑老师，这帖特别靓丽，风格变了！

杨帆

极简的代码，极致的效果，极美的示范，祝马老师元宵节快乐