浮光

马黑黑 · 发表于 2025-3-25 18:09

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-3-25 18:10

本帖最后由马黑黑于 2025-3-25 20:20 编辑

<style>
	@import 'https://638183.freep.cn/638183/web/ku/yslrc_rl_range_player.css';
	#papa { margin: 30px 0 30px calc(50% - 593px); background: #131C1E url('https://638183.freep.cn/638183/t24/webp3/fugl.webp') no-repeat -15% 50% / cover; border-radius: 6px; overflow: hidden; }
	#papa::after { position: absolute; content: ''; width: 100%; height: 100%; border-image: linear-gradient(45deg, orange, green, gold) 10 / 4px round; }
	#mplayer { --prog: snow; --track: tan; bottom: 20px; width: 40%; }
	#btnPlay { border-width: 0; }
	#lrcDiv {  --hlcolor: orange; top: 10px; right: 30px; text-shadow: 1px 1px 1px rgba(0,0,0,.5); }
	#fsbtn { bottom: 60px; color: silver; }
	#flower { position: absolute; top: 40px; left: 40px; width: 120px; cursor: pointer; z-index: 4; animation: rot 8s linear infinite var(--state); }
</style>

<div id="papa" class="pa">
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/06/25/09/05/34/video667a17de59867.mp4" autoplay loop muted></video>
	<img id="flower" src="https://638183.freep.cn/638183/small/f002.png" alt="" title="Alt+X" />
	<audio src="https://music.163.com/song/media/outer/url?id=2112196350" autoplay loop></audio>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/ku/yslrc_rl_range_player.js';
	var geci = `[00:00.61]周深 - 浮光\n[00:21.44]原编曲：Jannik\n[00:26.56]看指尖拨响蝴蝶 扇动一场离别\n[00:38.27]我推开无声岁月 续梦一页\n[00:49.83]。。。`;
	hcplay(papa, geci, 7);
	flower.onclick = () => btnPlay.click();
</script>

马黑黑 · 发表于 2025-3-25 18:10

本帖最后由马黑黑于 2025-3-25 20:04 编辑

本帖测试竖排歌词的range播放器模块。竖排通过CSS属性 writing-mode 实现，模块样式资源中 #lrcDiv { ... } 使用如下设置：

writing-mode: vertical-rl;

vertical-rl 表示文本从上往下书写、行从右向左排列。可以根据需求更改竖排行的排列方式，比如自左向右排列，值设为 vertical-lr ，可在帖子的 #lrcDiv {} 选择器中设置。

需要改变LRC歌词元素尺寸的，与上一个横排文本的模块不同，这里要改的不是 width 宽度属性，而是 height，例如：height: 600px;

模块的其它设置与前面的横排版本没有区别。