千年泪 - 致樵歌 - 音乐沙龙 - 花潮论坛

马黑黑 发表于 2025-3-30 20:17

千年泪 - 致樵歌

马黑黑 发表于 2025-3-30 20:17

<div id="hEdiv"><pre id="hEpre">
<style>
@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css?v=1';
#tz { margin: 30px 0 30px calc(50% - 593px); background: #e6e6e6 url('https://638183.freep.cn/638183/small/hgirl.gif') no-repeat center/524px 447px; }
#lrcDiv { writing-mode: vertical-rl; right: 30px; text-align: left; color: #ddd; --hlcolor: #eee; }
#mplayer { bottom: 30px; --track: #666; --prog: #222; }
#fsbtn { top: 40px; color: #333; border-color: #333; }
#playimg { position: absolute; top: 30px; left: 40px; cursor: pointer; filter: hue-rotate(60deg); transition: .7s; animation: rot 8s linear infinite var(--state); }
#playimg:hover { filter: unset; width: 150px; }
.vid { mask: radial-gradient(rgba(0,0,0,.5) 50%, transparent 80%, transparent 0); }
</style>

<div id="tz" class="pa">
<video class="vid" src="https://video.699pic.com/videos/55/98/73/a_euWfqXnZMC9v1555559873.mp4" autoplay loop></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1895440226" autoplay loop></audio>
<img id="playimg" src="https://638183.freep.cn/638183/small/hgirl.gif" alt="" title="Alt+X" width="120" />
</div>

<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js?v=1';
var gc = `
千年泪 - 归期Tanya
词曲 - Tank
才话别已深秋　只一眼就花落
窗台人影独坐　夜沉的更寂寞
一段路分两头　爱了却要放手
无事东风走过　扬起回忆如昨
摇摇欲坠　不只你的泪
还有仅剩的世界
嘲笑的风　高唱着离别我却听不见
穿越千年的眼泪　只有梦里看得见
我多想再见你　哪怕一面
前世未了的眷恋　在我血液里分裂
沉睡中缠绵　清醒又幻灭
梦在千丝发间　我在梦里搁浅
月光尽是从前　苍白了的想念
你眺望着天边　我眺望你的脸
谨记你的容颜　来世把你寻找
摇摇欲坠不只你的泪还有仅剩的世界
嘲笑的风高唱着离别我却听不见
穿越千年的眼泪　只有梦里看得见
我多想再见你　哪怕一面
前世未了的眷恋　在我血液里分裂
沉睡中缠绵　清醒又幻灭
摇摇欲坠　不只你的泪
嘲笑的风　高唱着离别
不管还要等待多少年
穿越千年的眼泪　只有梦里看得见
我多想再见你　哪怕一面
前世未了的眷恋　在我血液里分裂
沉睡中缠绵　清醒又幻灭`;
hcplay(tz,gc,7);
playimg.onclick = () => aud.paused ? aud.play() : aud.pause();
</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-30 20:18

帖子演示花潮原生LRC歌词同步播放器三合一之歌词竖排版样式

花飞飞 发表于 2025-3-30 20:56

这个竖版的歌词效果出来了，古香古色的，适合竖版。。
配的视频动态仿佛高科技的异度空间，搭在一起有穿越的感觉{:4_173:}好看。。
这个视频挺好用的吧

红影发表于 2025-3-30 20:59

这个好，现在三合一的横向纵向歌词的都有了呢{:4_187:}

红影发表于 2025-3-30 21:00

这小图还挺派用途的，既是底图，也是旋转按钮，真漂亮{:4_187:}

红影发表于 2025-3-30 21:01

这个制作古色古香的，很漂亮。
@樵歌师兄收礼开心{:4_187:}

花飞飞 发表于 2025-3-30 21:01

看下背景设了与背景空白部分相同的颜色，实际GIF图片不够1024，设置了524*447的尺寸置于背景中间位置，这个也很巧妙。
同时背景人物图片又当做小播图片，看上去风格一致，画面协调

花飞飞 发表于 2025-3-30 21:09

.vid { mask: radial-gradient(rgba(0,0,0,.5) 50%, transparent 80%, transparent 0); }
这个视频因为水印在右上角，又需要中间挖空，所以整了个径向渐变，达到效果。。{:4_170:}
估计以后会常用到，我得抄走了

马黑黑 发表于 2025-3-30 21:10

花飞飞发表于 2025-3-30 20:56
这个竖版的歌词效果出来了，古香古色的，适合竖版。。
配的视频动态仿佛高科技的异度空间，搭在一起有穿越 ...

要处理一下

马黑黑 发表于 2025-3-30 21:10

红影发表于 2025-3-30 20:59
这个好，现在三合一的横向纵向歌词的都有了呢

这个演示其实也可以不做的

马黑黑 发表于 2025-3-30 21:11

红影发表于 2025-3-30 21:00
这小图还挺派用途的，既是底图，也是旋转按钮，真漂亮

一物多用，好比一鱼多吃{:4_170:}

马黑黑 发表于 2025-3-30 21:11

红影发表于 2025-3-30 21:01
这个制作古色古香的，很漂亮。
@樵歌师兄收礼开心

{:4_191:}

马黑黑 发表于 2025-3-30 21:12

花飞飞发表于 2025-3-30 21:01
看下背景设了与背景空白部分相同的颜色，实际GIF图片不够1024，设置了524*447的尺寸置于背景中间位置，这个 ...

这是脑洞大开的说{:4_170:}

马黑黑 发表于 2025-3-30 21:12

花飞飞发表于 2025-3-30 21:09
.vid { mask: radial-gradient(rgba(0,0,0,.5) 50%, transparent 80%, transparent 0); }
这个视频因为水 ...

你只要属性渐变、遮罩，还有剪裁，怎么做都行

梦油发表于 2025-3-30 21:16

精彩作品、赏心悦目。黑黑快乐。樵歌开心！

花飞飞 发表于 2025-3-30 21:17

黑色的暂停/播放按纽更有立体感了，只是颜色设置就有这样的效果么，还是加了阴影，没找到相关代码。。
触碰时变色取消了，这个好，之前跟贴的时候不知道在哪里，变色不好控制。{:4_173:}

小辣椒 发表于 2025-3-30 21:18

这个歌词上面齐平了，好像歌词走得效果还是不齐平的漂亮，现在是集体上上下下了，面积比较大，这个是我个人的想法哦，黑黑分享辛苦{:4_187:}

马黑黑 发表于 2025-3-30 21:19

花飞飞发表于 2025-3-30 21:17
黑色的暂停/播放按纽更有立体感了，只是颜色设置就有这样的效果么，还是加了阴影，没找到相关代码。。
触 ...

模块里原本就有阴影之类的设置的，只是某些场景下看不出来

小辣椒 发表于 2025-3-30 21:19

樵哥哥收礼开心@樵歌

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

千年泪 - 致樵歌