原生lrc歌词同步帖子模板

评论资讯 [ 总 248 则 ]

·飞飞 - 2024-9-28 17:20
·悄然 - 2024-9-28 17:10
·小希 - 2024-9-27 20:45
·小希 - 2024-9-27 20:40
·悄然 - 2024-9-27 20:38
·飞飞 - 2024-9-27 20:36
·悄然 - 2024-9-27 13:02
·飞飞 - 2024-9-26 11:18
·飞飞 - 2024-9-25 20:12
·小希 - 2024-9-25 20:04

友情链接

◇ 午后时光
◇ 花潮论坛
◇ 马黑永硕网盘
◇ 老站
◇ 随意云
◇ css-doodle中文版
◇ HTML官方文档
◇ Web代码格式化工具
◇ 清音陋屋
◇ cubic-bezier

网站统计

·前端三套件 : 101
·JS插件 : 41
·黑石音画 : 271
·代码集锦 : 45
·小工具集合 : 20
·网友作品精选 : 5

·今日访问 : 287
·页面点击 : 410
·当前在线 : 6

原生lrc歌词同步帖子模板

位置: 首页 > JS插件[ 发布时间: 2024.6.22 作者: 马黑阅读: 180 ]

模板代码：

<style>

@import 'https://638183.freep.cn/638183/web/css/yslrc.css';

#tz { --ox: 1px; --lrc-top: 30%; --lrc-bg: radial-gradient(cyan, white, orange) center/120px 60px; --lrc-shadow: #000; height: 567px; background: url('图片地址') no-repeat center/cover; margin: 30px 0; }

#player { --size: 60px; left: 48%; bottom: 20px; }

.vid { height: calc(100% + 60px); mix-blend-mode: overlay; }

</style>

</div>

var sf = document.createElement('script');

sf.charset = 'utf-8';

sf.src = 'https://638183.freep.cn/638183/web/js/yslrc.js';

document.body.appendChild(sf);

var lrc = `

[00:00:910]歌词1

[00:02:608]歌词2

[03:45:230]歌词N

</script>

相关说明：

一、约定

帖子 id="tz" class="tz"
播放按钮 id="player" class="player"
视频 class="vid"
音频 id="aud"
CSS关键帧动画开关变量 var(--state)

二、CSS设置

#tz 选择器需要提供几个CSS变量：

① --ox ：帖子水平偏移系数，缺省值 81px（适用于花潮论坛）
② --lrc-top ：歌词纵向方向位置，即伪元素 ::before 的 top 属性值，缺省值 20px
③ --lrc-bg ：歌词颜色，支持渐变背景、图片背景
④ --lrc-shadow ：lrc歌词阴影，缺省值 #333

#tz 选择器还应当做必要的基本设置，如宽高（缺省值1024*640）、margin（外边距）、背景图片等。

#tz选择器设置举例：

#tz {

--ox: 1px;

--lrc-top: 10%;

--lrc-bg ：linear-gradient(to right, pink,tan,pink) center/200px 60px;

--lrc-shadow ：rgba(0, 0, 0, .7);

margin: 30px 0;

width: 1400px;

height: 720px;

background: url('背景图片地址') no-repeat center/cover;

}

#player 选择器可提供 --size 变量，缺省值 80px，另外可通过设置 left 和 top 属性定位元素位置。#player 可以是针对图片，也可以是一个div盒子，若是后者，请通过设置背景图片或动态追加元素使其成为按钮。#player 选择器代码举例：

#player {

--size: 100px;

bottom: 20px;

left: 45%;

/* 如果是div盒子

background: url('背景图片地址') no-repeat center/cover;

}

.vid 选择器

视频的样式默认宽高为100%，拉伸平铺，使用 mix-blend-mode: screen; 融合滤镜。如不满意，可全新定义特定属性值，例如希望高度为100%再加60px并使用叠加滤镜：

.vid {

height: calc(100% + 60px);

mix-blend-mode: overlay;

}

三、HTML代码

详情请查看模板代码的第 9~13 行，注意帖子父元素和播放器都有同值的 id 和 class 属性。

四、JS代码

引用JS资源文档的代码在模板代码的第 16~19 行，后面是歌词变量 lrc 的声明与赋值，歌词一句一行，或连在一起写、各句使用 \n 分隔符隔开。

四、应用实例：迷宫Live版

前一篇: colortext.js文档
下一篇: helight : 身轻如燕的代码展示脚本

发表评论:

评论列表 [5条]

#5 | 知名不具于 2024-6-25 14:11 发布: 打包的就是好，简洁而高效。这个讲解十分详细。很赞！

#4 | 知名不具于 2024-6-22 23:10 发布: 非常详尽的讲解，太赞了！

#3 | 悄然于 2024-6-22 17:03 发布: 模板井tz里添上这句，可以把贴子改为自己想要的大小。。width: 1024px; height: 574px;

#2 | 悄然于 2024-6-22 16:59 发布: (--state)变量可控，视频动画可控。。。简洁和灵活可以兼得~~

#1 | 飞飞于 2024-6-22 16:55 发布: CCS和JS都打了包。。。这是那个双封的~~代码简洁又清晰，每一小节配置都给了说明。。。