冬日花园

马黑黑

马黑黑

参考代码

1. <style> #papa { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 680px; background: lightblue url('https://638183.freep.cn/638183/t22/webp/drhy.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1; } </style>
   
2. 
   
3. <div id="papa">
   
4.         <img src="https://638183.freep.cn/638183/t22/gif/1s.gif" alt="" style="position: absolute; bottom: 0; right: 0;" />
   
5. </div>
   
6. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5179669.mp3" loop autoplay></audio>
   
7. 
   
8. <script >
   
9. 
   
10. //插件代码略
    
11. //歌词数组代码样式↓
    
12. let lrcAr = [[0.95,"Je voudrais du soleil vert<br>我想要绿色的阳光",2.6],[5.27,"Des dentelles et des théières<br>茶壶和蕾丝的花边",]];
    
13. 
    
14. //设置播放器插件参数↓
    
15. HCPlayer({
    
16.         lrcAr: lrcAr,
    
17.         lrc_css: `
    
18.                 top: 5px;
    
19.                 left: 50%;
    
20.                 transform: translate(-50%);
    
21.                 --bg: linear-gradient(hsla(100,70%,50%,.35),hsla(120,40%,40%,.6));
    
22.                 color: hsla(120,100%,95%,.95);
    
23.         `,
    
24.         player_css: `
    
25.                 bottom: 20px;
    
26.                 --color: snow;
    
27.                 --ww: 200px;
    
28.                 --btn_size: 40px;
    
29.                 --btn_img: url("https://638183.freep.cn/638183/t22/btn/g3.png") no-repeat center/cover;
    
30.         `,
    
31. });
    
32. 
    
33. </script>

复制代码

梦油

小鸟很多情，摇头摆尾还抬腿打招呼，无奈，小女孩无动于衷，也不看看它一眼。

马黑黑

梦油 发表于 2022-11-20 11:26
小鸟很多情，摇头摆尾还抬腿打招呼，无奈，小女孩无动于衷，也不看看它一眼。

白白表白了

红影

这个封装花潮播放器也能做双语同步，黑黑又做了个范例。画面好美

红影

那个小动图也好可爱。这外语不知道是什么语。法语？意大利语？

马黑黑

红影 发表于 2022-11-20 12:15
那个小动图也好可爱。这外语不知道是什么语。法语？意大利语？

小动物说的是法语

马黑黑

红影 发表于 2022-11-20 12:14
这个封装花潮播放器也能做双语同步，黑黑又做了个范例。画面好美

调用插件的语句虽然略多，但这样更能细化吧，希望大家努力，学一点CSS基础的知识

马黑黑

醉美水芙蓉 发表于 2022-11-20 13:16
老师做得画面真美！

相约爱晚亭

黑黑老师选图有眼光！在什么网站找图啊，可否介绍一二？

红影

马黑黑 发表于 2022-11-20 13:04
小动物说的是法语

哦哦，知道了。声音很柔和，好听

红影

马黑黑 发表于 2022-11-20 13:18
调用插件的语句虽然略多，但这样更能细化吧，希望大家努力，学一点CSS基础的知识

没多啊，感觉用封装代码后，其他代码更少了呢

小辣椒

黑黑这个封装播放器加双语

梦油

马黑黑 发表于 2022-11-20 11:56
白白表白了

是啊，你设计的挺有趣。

马黑黑

梦油 发表于 2022-11-20 16:36
是啊，你设计的挺有趣。

感谢感谢

马黑黑

小辣椒 发表于 2022-11-20 14:33
黑黑这个封装播放器加双语

所有插件都支持双语分行显示。歌词中，没有 <br> 就不分行。

马黑黑

红影 发表于 2022-11-20 14:05
没多啊，感觉用封装代码后，其他代码更少了呢

那是自然的，不过插件本身不能剥离，帖子的实际代码量并不少，还多一点

马黑黑

红影 发表于 2022-11-20 14:02
哦哦，知道了。声音很柔和，好听

小鸟唱歌基本都好听的

法语适合拿来谈情说爱，意大利语适合拿来唱歌，德语骂人最好

红影

马黑黑 发表于 2022-11-20 18:11
那是自然的，不过插件本身不能剥离，帖子的实际代码量并不少，还多一点

插件的代码在也好啊，没事还能重新看看学学，要是直接打包了，对学习不利