|
|

楼主 |
发表于 2023-10-9 07:39
|
显示全部楼层
帖子代码
- <style>
- #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; }
- #papa::before { position: absolute; content: url('https://638183.freep.cn/638183/t23/gif/bbb.gif'); bottom: 0; mix-blend-mode: screen;}
- #sky { position: absolute; width: 100%; height: 20%; top: 0; }
- #papa > svg { stroke-linecap: round; }
- </style>
- <div id="papa">
- <div id="sky"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2087973934" autoplay loop></audio>
- </div>
- <script>
- (function() {
- 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] ];
- let js1 = 'https://638183.freep.cn/638183/web/api/svg_path_lrc.js',
- js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
- let loadJs = (url,callback) => {
- let body = document.querySelector('body'), jsNode = document.createElement('script');
- jsNode.charset = 'utf-8';
- jsNode.setAttribute('src', url);
- body.appendChild(jsNode);
- jsNode.onload = () => callback();
- };
- loadJs(js1, () => {
- HCPlayer({
- papa: '#papa',
- lrcAr: lrcAr,
- lrc_css: 'top: 20px;',
- fs_css: 'bottom: 130px; background: transparent;',
- player_css: 'width: 240px; height: 80px; bottom: 20px;',
- path: 'M10 5 C10 90, 230 90 ,230 5',
- btn: {left: 54, top: 28},
- track: {track: '#666', prog: '#eee'},
- img: {play: '', pause: ''}
- });
- });
- loadJs(js2, () => {
- H5lz({
- papa: '#sky',
- total: 40,
- size: {width: 6, height: 6},
- shape: {background: '', borderRadius: ''},
- ani: 'toLeft',
- maxTime: 30,
- offset: {x: 0, y: 0},
- });
- });
- })();
- </script>
复制代码 自由路径进度条使用规整的三次贝塞尔曲线做成,路径线条的两端呈圆形,这不是插件预设的,是通过CSS设定的线帽属性:
#papa > svg { stroke-linecap: round; }
stroke-linecap 线帽,round 圆形。除了圆形,线帽还有一个方形,square。
|
|