@马黑黑 请教老师!
注意看第 66 行:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>未命名</title>
</head>
<body>
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/6b845cb122d21044ae7765600701868d.mp4.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; --state: running; }
.leaf { position: absolute; font-size: 30px; top: -20%; color: AliceBlue; opacity: .64; animation: drop var(--duration) var(--delay) infinite linear var(--state); }
@keyframes drop { to { top: 105%; transform: rotate(1turn); } }
</style>
<div id="papa"></div>
<audio id="aud" src="https://i.mp3.wf/view.php/7b31f18dc176e74a835fe797dead8f90.mp3" autoplay loop></audio>
<script>
let leaves = ['❄','❄','❄','❄','❄','❄'];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/plater_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: [ ,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
],
player_css: `
right: -4px;
bottom: 10px;
color: white;
--color1: snow;
--color2: black;
`,
lrc_css: `
bottom: 15px;
--color: linear-gradient(rgba(216,204,184,.3),rgba(216,204,184,.7));
--bg: linear-gradient(rgba(97,77,48,.25), rgba(97,77,48,.6));
`,
});
}
Array.from({length: 30}).forEach((item, key) => {
item = document.createElement('span');
item.className = 'leaf';
item.innerHTML = leaves;
item.style.cssText += `
left: ${Math.random() * 100}%;
font-size: ${30 + Math.floor(Math.random() * 30)}px;
--duration: ${10 + Math.random() * 10}s;
--delay: ${10 - Math.random() * 25}s;
`;
papa.appendChild(item);
});
</script>
</body>
</html>
你把歌词作为一个单位放入插件配置中,虽不主张但这是可以的,唯一要注意的是,你不能像声明变量一样用分号结尾:配置里的每一个单位,比如帖子元素、歌词、播放器和其他可能的配置,之间是有逗号分隔的。 醉美水芙蓉 发表于 2023-8-24 22:50
谢谢黑黑老师指导!
这个,你需要理解一下:插件的配置,我使用JS对象的方式弄。JS的对象,用键值对表示变量和变量值,例如:
xingming: ‘张三',
当有多个变量,则用小角逗号隔开:
xingming: '张三',
nianling: 19,
xingbie: '男',
它们写在大括号里:
let Person = {
xingming: '张三',
nianling: 19,
xingbie: '男',
};
我的插件配置,就是用这种方式弄的。 背景图很漂亮。雪花也很美。欣赏水芙蓉美女好帖{:4_199:} 醉美水芙蓉 发表于 2023-8-25 06:07
原来是一个标点符号,导致我的播放器不能播放呢?
原理在5楼 醉美水芙蓉 发表于 2023-8-25 06:04
谢谢红影美女鼓励!
水芙蓉的歌词好像都没做微调?看到有几句后面的数字很大,微调的话不可能这样的。 漂亮!{:5_116:} 醉美水芙蓉 发表于 2023-8-25 17:45
谢谢东篱老师支持!
必须支持!{:5_112:}
页:
[1]