浮光
<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 = `周深 - 浮光\n原编曲：Jannik\n看指尖拨响蝴蝶 扇动一场离别\n我推开无声岁月 续梦一页\n你我只是打个照面 可曾有过誓约\n走进熟悉却 陌生的思念\n啊……\n啊……\n你的眼眸装满了时间\n你的身后拥故事成篇\n此生如梦愿细数流年\n与你同写 沧海桑田\n浮光掠影重山彩云间\n你的伏线穿越千百年\n人生不过恍惚三万天\n漫漫人间 留恋流连\n你说那月光 照过同样城墙\n永恒的刹那的 此刻沉默无话\n想问你这星空 是否不曾变\n是啊 是啊\n我们望着它\n风吹过耳旁 古远的歌唱啊\n这是我也是你 不曾遗忘的啊\n是来路是去处 是你在回答\n去吧 去啊\n总会相遇吧\n你的眼眸装满了时间\n你的身后拥故事成篇\n此生如梦愿细数流年\n与你同写 沧海桑田\n浮光掠影重山彩云间\n你的伏线穿越千百年\n人生不过恍惚三万天\n漫漫人间 留恋流连\n制作人：曾吴秋杰\n笛子：曾吴秋杰\n箫：河帛\n弦乐：国际首席爱乐乐团\n弦乐录音师：王小四\n配唱/人声录音师：徐威@52Hz studio（Shanghai）\n混音/母带工程师：赵靖@SBMS Beijing\n出品人：赵宗/唐晶晶\n项目策划：小粉\n艺人统筹：孟竹\n企划：黄鲲/孟竹\n支持：谢帆/姜凯朝\n文案：谢帆\n出品：网易音乐人 X 青云LAB\n特别鸣谢：周深工作室`;
hcplay(papa, geci, 7);
flower.onclick = () => btnPlay.click();
</script> 本帖最后由 马黑黑 于 2025-3-25 20:20 编辑 <br /><br /><div id="hEdiv"><pre id="hEpre">
<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 = `周深 - 浮光\n原编曲：Jannik\n看指尖拨响蝴蝶 扇动一场离别\n我推开无声岁月 续梦一页\n。。。`;
hcplay(papa, geci, 7);
flower.onclick = () => btnPlay.click();
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script> 本帖最后由 马黑黑 于 2025-3-25 20:04 编辑
本帖测试竖排歌词的range播放器模块。竖排通过CSS属性 writing-mode 实现，模块样式资源中 #lrcDiv { ... } 使用如下设置：
writing-mode: vertical-rl;
vertical-rl 表示文本从上往下书写、行从右向左排列。可以根据需求更改竖排行的排列方式，比如自左向右排列，值设为 vertical-lr ，可在帖子的 #lrcDiv {} 选择器中设置。
需要改变LRC歌词元素尺寸的，与上一个横排文本的模块不同，这里要改的不是 width 宽度属性，而是 height，例如：height: 600px;
模块的其它设置与前面的横排版本没有区别。
刚看到这贴就被惊艳到了。。
构图有创意，色彩沉重大气，
歌词竖排特别艺术感。。。 之前应该有过这个标题的贴子，那个是纯音，
这个版的头一回听。。。话说周深唱得真好听啊。{:4_199:} 看了下代码，还是有很多设计在里面的。
首先是背景图片，加了点点位移，-15% 50%，保证了大月亮在正中间。在无裁剪图片的情况下，这个处理效果完美
这回加了个边框，橙色，绿色和金色交替， 这个可以根据贴子色彩来更改需要的颜色。 之前几排词出现时觉得好漂亮~~
现在发现竖版的更惊艳，七列不多不少，正适合这样的面画和视频动态，
歌词给了一丢丢的阴影，没那么平面。。好看。
hcplay(papa, geci, 7);歌词行列数这里可以设置吧，要改起来那更方便啦。。 漂亮，这个把播放器按钮的边框取消了，把底图加了个颜色相隔的边框呢。
图图很简单，用这样的视频去加持，一下子感觉滋味浓郁了{:4_199:} 小花播没见过，颜色和造型都挺百搭，收了收了
{:4_174:} 看到这个，发觉background的设置又忘得差不多了，我得赶紧去复习一下去{:4_173:} 这个制作背景和歌曲意境太相符了，漂亮{:4_199:} 红影 发表于 2025-3-25 19:17
这个制作背景和歌曲意境太相符了，漂亮
感谢夸奖 花飞飞 发表于 2025-3-25 18:54
刚看到这贴就被惊艳到了。。
构图有创意，色彩沉重大气，
歌词竖排特别艺术感。。。
重头戏是歌词竖排，还有边框设计 这竖排的歌词做了新的封装，貌似JS的封装还是原来的呢。 花飞飞 发表于 2025-3-25 18:57
之前应该有过这个标题的贴子，那个是纯音，
这个版的头一回听。。。话说周深唱得真好听啊。
你的最爱{:4_170:} 花飞飞 发表于 2025-3-25 19:15
小花播没见过，颜色和造型都挺百搭，收了收了
俺精心制作的粗糙产品{:4_170:} 马黑黑 发表于 2025-3-25 19:19
你的最爱
爱是爱的，最爱真不是{:4_170:} 花飞飞 发表于 2025-3-25 19:07
看了下代码，还是有很多设计在里面的。
首先是背景图片，加了点点位移，-15% 50%，保证了大月亮在正中间。 ...
看得仔细 红影 发表于 2025-3-25 19:13
漂亮，这个把播放器按钮的边框取消了，把底图加了个颜色相隔的边框呢。
图图很简单，用这样的视频去加持， ...
没有背景图都可以呢 马黑黑 发表于 2025-3-25 19:21
看得仔细
原来背景图挺大的嘛，只是移位就可以达到剪切效果。。。代码处理跟PS处理效果一样一样