枫叶落满地 （学习黑黑二个脚链播放器效果）
<style>
@import 'https://638183.freep.cn/638183/web/mod/anklet_lrc.css?v=1.0';
#pa { margin: 130px 0 30px calc(50% - 721px); width:1280px; height: 822px; background: url('https://xlaj.cn/upfile/202411/14/09.jpg') no-repeat center/cover; }
#mplayer { width: 180px; height:180px; left: 55%;top:45%; color: lightblue;
--color1: CadetBlue;
--color2: Yellow;
--track: Gainsboro;
--prog: LightSkyBlue;
--btnBg: linear-gradient(CadetBlue, Yellow);}
#lrc { bottom:60px;left: 43%;color: Honeydew; font-size: 1.8em; --bg: linear-gradient(rgba(65,105,225,.15),rgba(65,105,225,.55)); }
#fsbtn { left: 47%; top:20px;}
</style>
<div id="pa" class="pa">
<audio src="https://file.uhsea.com/2411/12af48f2b05c75d14729c2a4b9a12eeeME.mp3"></audio>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/12/10/V-121080-778B0561.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/anklet_lrc.js';
var geci = [
['0.00', '枫叶落满地',5.11],
['5.38', '作词：马琳',2.56],
['8.08', '作曲：张嘉瑞K1',2.56],
['10.77', '演唱：原来是夏夏',2.57],
['13.47', '树叶不是一天黄',2.71],
['16.32', '人心不是一天凉',3.26],
['19.75', '风吹起满地忧伤',3.19],
['23.11', '莫名又红了眼眶',3.26],
['26.54', '把心事寄托月亮',3.25],
['29.96', '照的我眼泪两行',3.25],
['33.38', '孤独是我最后的下场',6.59],
['40.32', '故事不长不难讲',3.24],
['43.73', '人也不好却难忘',3.31],
['47.21', '不过相识了一场',3.15],
['50.53', '却弄的满身是伤',3.21],
['53.91', '想要回到你身旁',3.31],
['57.39', '回到最初的模样',3.32],
['60.88', '没本事把你彻底遗忘',6.59],
['67.82', '枫叶已经落满地',3.06],
['71.04', '对你思念更浓郁',3.34],
['74.56', '好想再见一面再抱一抱你',6.55],
['81.45', '这些年受的委屈',3.26],
['84.88', '就让秋风告诉你',3.19],
['88.24', '再见或许只能在梦里相遇',6.56],
['95.15', '枫叶已经落满地',3.23],
['98.55', '你不知我在想你',3.29],
['102.01', '只能靠着泛黄照片去回忆',6.50],
['108.85', '我也想把你忘记',3.20],
['112.22', '可是回忆不争气',3.21],
['115.60', '为何感情伤人又伤己',7.51],
['123.50', '~Music~',25.28],
['150.11', '故事不长不难讲',3.20],
['153.48', '人也不好却难忘',3.19],
['156.84', '不过相识了一场',3.26],
['160.27', '却弄的满身是伤',3.32],
['163.76', '想要回到你身旁',3.24],
['167.17', '回到最初的模样',3.17],
['170.51', '没本事把你彻底遗忘',6.58],
['177.44', '枫叶已经落满地',3.35],
['180.97', '对你思念更浓郁',3.16],
['184.30', '好想再见一面再抱一抱你',6.54],
['191.18', '这些年受的委屈',3.19],
['194.54', '就让秋风告诉你',3.14],
['197.85', '再见或许只能在梦里相遇',6.71],
['204.91', '枫叶已经落满地',3.09],
['208.16', '你不知我在想你',3.32],
['211.66', '只能靠着泛黄照片去回忆',6.56],
['218.57', '我也想把你忘记',3.20],
['221.94', '可是回忆不争气',3.21],
['225.32', '为何感情伤人又伤己',7.47],
['233.18', '☆谢谢欣赏☆',4.5]
];
hcplay(pa, geci);
fscreen.fs(pa, fsbtn);
</script> @马黑黑
二个脚链教程，代码和说明我都仔细看了几遍的，就只能这个效果了，想再漂亮也是做不出来了 感谢黑黑的源码分享 小辣椒 发表于 2024-12-5 20:53
@马黑黑
二个脚链教程，代码和说明我都仔细看了几遍的，就只能这个效果了，想在漂亮也是做不出来了
这个已经漂亮得不要不要的，你还想咋地{:4_173:} 马黑黑 发表于 2024-12-5 21:00
这个已经漂亮得不要不要的，你还想咋地
本来想找个下面的视频没有红颜色的，但一下子找不到就发了，小圆点颜色想和背景图同色系，就用了緑的，感觉没有很突出，想加深一点和背景不同色了，就这样发了 辣椒这个太漂亮了，象翡翠一样 绿叶清舟 发表于 2024-12-5 21:38
辣椒这个太漂亮了，象翡翠一样
哈哈，清舟你这么说那这个是翡翠緑了{:4_173:} 漂亮！谢谢小辣椒精彩分享{:4_204:} 亲爱的把脚链颜色调得很美呢，这个制作好漂亮啊{:4_199:} 小辣椒 发表于 2024-12-5 21:19
本来想找个下面的视频没有红颜色的，但一下子找不到就发了，小圆点颜色想和背景图同色系，就用了緑的，感 ...
可以了的 https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 杨帆 发表于 2024-12-5 22:42
漂亮！谢谢小辣椒精彩分享
问好杨帆，谢谢欣赏{:4_171:} 红影 发表于 2024-12-5 23:07
亲爱的把脚链颜色调得很美呢，这个制作好漂亮啊
这个都是按黑黑配置说明做的，没有看配置说明都不会做了 马黑黑 发表于 2024-12-5 23:11
可以了的
黑黑晚上好{:4_180:} 起个网名好难 发表于 2024-12-6 06:04
难难晚上好，谢谢欣赏{:4_187:} 小辣椒 发表于 2024-12-6 20:23
黑黑晚上好
你嚎你嚎 小辣椒 发表于 2024-12-6 20:23
这个都是按黑黑配置说明做的，没有看配置说明都不会做了
能做成喜欢的样子，就是收获呢{:4_187:} 小辣椒 发表于 2024-12-5 22:17
哈哈，清舟你这么说那这个是翡翠緑了
是啊漂亮的翡翠绿，就是翡翠套脚上太奢侈了{:4_189:} 找到了，是这个吧，我下星期做一个@小辣椒 做出来好不好不一定{:4_170:}
页:
[1]
2