|
凡哥教程第二十七讲作业：
参照本讲最后一个示例，挑选一个中意的插件，制作一个真正的LRC歌词同步帖子。 要求帖子要有背景图片，并能根据需要调整歌词、播放器和全屏按钮的位置和颜色。
作业主要目的是尝试使用插件，
因此帖子漂亮与否不是重点，重点在驾驭插件，让插件为己所用。
<style>
#mama {
margin: 130px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://pic.imgdb.cn/item/66ceef38d9c307b7e98759f3.webp') no-repeat center/cover;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
position: relative;
}
#mama > video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
opacity: .59;
-webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
pointer-events: none;
}
</style>
<div id="mama" class="mama">
<audio src="https://music.163.com/song/media/outer/url?id=29947349" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca239c07a1.mp4" autoplay loop muted></video>
</div>
<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/oscpp_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: 0,
average: 0,
pinpu: {num: 880, size: 1, gap: 1, color1: 'Wheat', color2: 'Peru'},
player_css: `
left: 52%;
transform: translateX(-50%);
bottom: 390px;
color: white;
opacity: .39;
--hh: 120px;
--discBg: url('https://pic.imgdb.cn/item/66cef354d9c307b7e98bbc63.gif') center/cover;
`,
lrc_css: 'left: 50%; transform: translateX(-50%); bottom: 20px; --bg: linear-gradient(lightblue, Peru);font: bold 2.0em cursive; color: #ccc;',
fs_css: 'right: 20px; top: 20px; --bg: transparent; --color: snow;',
});
};
var geci = `
[00:00.590]单曲：泼茶香
[00:02.75]歌手：刘珂矣
[00:03.430]所属专辑：半壶纱
[00:04.464]作词 : 刘珂矣
[00:05.656]作曲 : 刘珂矣/百慕三石
[00:07.63]学习黑师20240828《孤夜舞》效果
[00:08.843]原生lrc歌词同步之示波状频谱播放器
[00:43.519]风吹来赏落红渐浓
[00:50.188]月光下放海灯如童
[00:56.535]桨声里纸帐中唱着
[01:03.177]雪纷纷了红斗篷
[01:09.741]风又吹羽叶花牵藤
[01:16.293]半月光点燃了书灯
[01:22.881]曲栏外回荡着竹声
[01:29.929]谁能绕过这微微的冷
[01:37.32]飘带引斜阳扫墨腕底香
[01:43.459]共我泼茶人如今在哪方
[01:50.51]石绿补天长云锣声两行
[01:56.563]微笑过往只道是平常
[02:32.215]风又吹羽叶花牵藤
[02:38.902]半月光点燃了书灯
[02:45.184]曲栏外回荡着竹声
[02:51.548]谁能绕过这微微的冷
[02:59.212]飘带引斜阳扫墨腕底香
[03:05.682]共我泼茶人如今在哪方
[03:12.231]石绿补天长云锣声两行
[03:18.815]微笑过往只道是平常
[03:35.056]如今在哪方
[03:38.517]石绿补天长云锣声两行
[03:45.95]微笑过往只道是平常
[03:51.808]悠然一曲又闻泼茶香
`;
</script>
| 
发表于 2024-8-28 18:44
发表于 2024-8-28 19:31
看到青青的回复更是开心