轻涟 La vaguelette

马黑黑

马黑黑

帖子代码

1. <style> #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/qklm.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; }
   
2. .mypic { position: absolute; width: 150px; cursor: pointer; animation: rot 6s infinite linear var(--state); }
   
3. .mypic:nth-of-type(1) { left: 20px; }
   
4. .mypic:nth-of-type(2) { top: 20px; width: 200px; }
   
5. .mypic:nth-of-type(3) { right: 20px; }
   
6. #vid { position: absolute; width: 1024px; height: 740px; top:-100px; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; }
   
7. @keyframes rot { to { transform: rotate(360deg); } }
   
8. </style>
   
9. 
   
10. <div id="papa">
    
11.         <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/60/33/638ee6ad2b3ff.mp4" autoplay="" loop="" muted=""></video>
    
12.         <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" />
    
13.         <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" />
    
14.         <img class="mypic" src="https://638183.freep.cn/638183/web/svg/flower_1.svg" alt="" />
    
15.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2100334024" autoplay loop></audio>
    
16. </div>
    
17. 
    
18. <script>
    
19. 
    
20. let sFile = document.createElement('script');
    
21. sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
    
22. sFile.charset = 'utf-8';
    
23. document.head.appendChild(sFile);
    
24. 
    
25. sFile.onload = () => {
    
26.         LRC({
    
27.                 papa: '#papa',
    
28.                 lrcAr: geci,
    
29.                 btn: '.mypic',
    
30.                 lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
    
31.         });
    
32. };
    
33. 
    
34. let geci = [
    
35.         [3,'轻涟 La vaguelette',10],
    
36.         [12,'歌手 ：HOYO-MiX','4'],
    
37.         [22.9,"Ah, si je pouvais vivre dans l'eau<br>啊，若化水复回归途",5.2],
    
38.         [28.44,"le monde serait-il plus beau<br>令故土朝暮如初",3.9],
    
39.         [32.74,"Nous pardonneras-tu, &#244; chère mère<br>啊母亲可否将我宽恕",5.1],
    
40.         [38.96,"L'eau dans son courant fait danser nos vies<br>向四季流溯，引万籁驰骛",6.7],
    
41.         [45.89,"Et la cité, elle nourrit<br>所过处百废复苏",3.9],
    
42.         [50.24,"Ainsi que toi, mon doux amour<br>亦充盈挚爱的心湖",5.0],
    
43.         [83.79,"Non, le grand amour ne suffit pas<br>爱，就将这酣梦深埋",6.5],
    
44.         [90.51,"Seul un adieu fleurira<br>诀别如繁花盛开",4.1],
    
45.         [94.97,"C'est notre histoire de vie, douce et amère<br>似你我往怀，愉快悲哀",6.4],
    
46.         [101.38,"Moi, je suis et serai toujours là<br>爱，我会在过去未来",5.4],
    
47.         [106.92,"à voir le monde et sa beauté<br>注视这世间精彩",4.8],
    
48.         [112.45,"Et &#231;a ne changera jamais, jamais...<br>一切从未改，未改……",5.9]
    
49. ];
    
50. 
    
51. </script>

复制代码

马黑黑

本帖测试：单独 lrc歌词同步插件

前端仅需要加载插件文档以及做插件配置，其余交给 lrc.js 插件处理，包括视频背景的暂停。插件配置方法稍后发布，请关注俺的小花园。

马黑黑

法文歌词在这里有些问题

焱鑫磊

向老师学习！

红影

这个还是两行歌词呢。这个好，歌词只交给js就行了，自己不用操心了

红影

马黑黑 发表于 2023-12-17 21:22
法文歌词在这里有些问题

从头看了一下，好像只有最后一句出了问题，前面的都好好的

红影

感谢黑黑又带来新的玩法，可以学着用打包的方式做歌词了

马黑黑

红影 发表于 2023-12-17 22:05
从头看了一下，好像只有最后一句出了问题，前面的都好好的

嗯，好像是 &#231;a 的头一个字母，在伪元素中的显示有问题

马黑黑

焱鑫磊 发表于 2023-12-17 21:45
向老师学习！

马黑黑

红影 发表于 2023-12-17 22:06
感谢黑黑又带来新的玩法，可以学着用打包的方式做歌词了

这个，插件代理的东东比较多，前端省点事，就是不知道有木有问题

马黑黑

红影 发表于 2023-12-17 22:01
这个还是两行歌词呢。这个好，歌词只交给js就行了，自己不用操心了

其实多数插件都支持两行歌词的

马黑黑

醉美水芙蓉 发表于 2023-12-17 22:03
欣赏学习老师新作品！

晚上好

红影

马黑黑 发表于 2023-12-17 22:25
嗯，好像是 &#231;a 的头一个字母，在伪元素中的显示有问题

这样的字母太怪异了

红影

马黑黑 发表于 2023-12-17 22:27
这个，插件代理的东东比较多，前端省点事，就是不知道有木有问题

等着看后面的配置方法，比如改歌词颜色什么的

红影

马黑黑 发表于 2023-12-17 22:28
其实多数插件都支持两行歌词的

嗯嗯，这个只对外语的吧，中文的不需要。

马黑黑

红影 发表于 2023-12-17 22:35
嗯嗯，这个只对外语的吧，中文的不需要。

中文是没必要的

马黑黑

红影 发表于 2023-12-17 22:35
嗯嗯，这个只对外语的吧，中文的不需要。

你不分行也是可以的

马黑黑

红影 发表于 2023-12-17 22:34
等着看后面的配置方法，比如改歌词颜色什么的

这个和前面的插件是一样的