论坛 › 音乐沙龙 › 苦了累了听听歌 帖赠：东篱闲人

小辣椒 发表于 2025-4-20 18:07

苦了累了听听歌 帖赠：东篱闲人

<style>
        @import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css';
        #papa {left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #eee url('https://wj.zp68.com/lxx/yunhua/2025/04/20/01.jpg') no-repeat center/cover; }
        @media (max-width: 500px) {
                #papa { width: clamp(250px, 90vw, 300px); font-size: 0.4em; }
        }
        #mplayer { bottom:40px; left: 35%;--track: #75ccea;--prog:#fff;}
        #lrcDiv { writing-mode: vertical-rl; top: 25%; left: 35%; text-align: left; letter-spacing: 0.4em; left; color: #8cd4f2; --hlcolor: #002b58; }
        #fsbtn { top: 30px; }
               .vid { opacity: .35; }
</style>

<div id="papa" class="pa">
        <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/3d34-audiofreehighqps/36/95/GAqhjg0LC9mgACAAAAMvcl7r.m4a" autoplay loop></audio>
        <video class="vid" src="https://video.699pic.com/videos/50/42/79/b_f7U8rXJQjjCi1671504279.mp4" autoplay loop muted></video>
</div>
<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js';
        var geci = `
苦了累了听听歌
歌手：余晓清
词：余晓清
曲：余晓清
出品：余乐文化   
人生就像一条长河
深深浅浅我们走过
酸甜苦辣样样都尝过
成败得失别计较太多
人生就像一首诗歌
写满人间悲欢离合
人间美景不容去错过
恩恩怨怨一笑而过
困了累了可以听听歌
歌声能够带走寂寞
别再让痛苦把自己折磨
每天都要开心地活
苦了累了可以唱唱歌
唱出心中喜怒哀乐
闲看庭前花开花落
一生过得洒洒脱脱
歌词同步编辑：小辣椒
人生就像一条长河
深深浅浅我们走过
酸甜苦辣样样都尝过
成败得失别计较太多
人生就像一首诗歌
写满人间悲欢离合
人间美景不容去错过
恩恩怨怨一笑而过
困了累了可以听听歌
歌声能够带走寂寞
别再让痛苦把自己折磨
每天都要开心地活
苦了累了可以唱唱歌
唱出心中喜怒哀乐
闲看庭前花开花落
一生过得洒洒脱脱
困了累了可以听听歌
歌声能够带走寂寞
别再让痛苦把自己折磨
每天都要开心地活
苦了累了可以唱唱歌
唱出心中喜怒哀乐
闲看庭前花开花落
一生过得洒洒脱脱
谢谢欣赏

`;
        hcplay(papa, geci,9);
</script>

小辣椒 发表于 2025-4-20 18:08

@东篱闲人

谢谢老头的精美礼物，小辣椒回礼了，只是不知道为什么，最近大部分图图我都看不见，郁闷S{:4_198:}

小辣椒 发表于 2025-4-20 18:11

@马黑黑

黑黑套用玩一个不受教 的播放器代码，反正没有动脑子， 16:9 的宽高，直接以前的图等比例出来了，我自己都没有修改的{:4_189:}

马黑黑 发表于 2025-4-20 18:46

小辣椒 发表于 2025-4-20 18:11
@马黑黑

黑黑套用玩一个不受教 的播放器代码，反正没有动脑子， 16:9 的宽高，直接以前的图等比例出来 ...

这个制作很美。

这个不是纯套用了，这是代码重用，有自己的设计、元素等等等等

红影 发表于 2025-4-20 19:15

这歌真好，在人世间就应该如此洒脱。{:4_173:}

红影 发表于 2025-4-20 19:15

制作也漂亮，尤其歌词同步的颜色调整和背景很相符。
欣赏亲爱的好帖，东篱大哥收礼开心{:4_199:}

亦是金 发表于 2025-4-20 19:40

@小辣椒https://pic1.imgdb.cn/item/6805d8ab58cb8da5c8bb4c0d.jpg

我只能看见这样的！{:4_198:}

亦是金 发表于 2025-4-20 20:02

改用Microsoft Edge 浏览器，可以看见了！帖子精美，歌曲好听！欣赏 学习 点赞！{:4_187:}

樵歌 发表于 2025-4-20 20:35

哇塞，小辣椒直接高大上了。{:4_178:}

樵歌 发表于 2025-4-20 20:36

画面素雅光明，歌曲选 得相当好，那字的设计很是独到的好，完全是小辣椒风格！

小辣椒 发表于 2025-4-20 22:25

马黑黑 发表于 2025-4-20 18:46
这个制作很美。

这个不是纯套用了，这是代码重用，有自己的设计、元素等等等等

就换了一下颜色和移动了歌词位置，把歌词距离改了一下，现在是font-size: 0.4em;

小辣椒 发表于 2025-4-20 22:25

红影 发表于 2025-4-20 19:15
这歌真好，在人世间就应该如此洒脱。

这歌我喜欢的，以前有分享过的

小辣椒 发表于 2025-4-20 22:26

红影 发表于 2025-4-20 19:15
制作也漂亮，尤其歌词同步的颜色调整和背景很相符。
欣赏亲爱的好帖，东篱大哥收礼开心

亲爱的就老夸，其实我就基本玩套用了

马黑黑 发表于 2025-4-20 22:26

小辣椒 发表于 2025-4-20 22:25
就换了一下颜色和移动了歌词位置，把歌词距离改了一下，现在是font-size: 0.4em;

font-size 是字号设置。要改变字间距，需要用到的属性是 letter-spacing 属性

小辣椒 发表于 2025-4-20 22:27

亦是金 发表于 2025-4-20 19:40
@小辣椒

我只能看见这样的！

前辈我现在也是老出现这种情况，但我自己的可以看见{:4_170:}

小辣椒 发表于 2025-4-20 22:29

亦是金 发表于 2025-4-20 20:02
改用Microsoft Edge 浏览器，可以看见了！帖子精美，歌曲好听！欣赏 学习 点赞！

谢谢前辈欣赏，现在小辣椒基本就玩简单的套用了，稍微改一下就算自己的了，以前我会研究代码，现在就纯套用了

小辣椒 发表于 2025-4-20 22:30

樵歌 发表于 2025-4-20 20:35
哇塞，小辣椒直接高大上了。

樵哥哥晚上好，哪有高大上啊{:4_203:}

小辣椒 发表于 2025-4-20 22:36

马黑黑 发表于 2025-4-20 22:26
font-size 是字号设置。要改变字间距，需要用到的属性是 letter-spacing 属性

好的，等我回来再研究了

马黑黑 发表于 2025-4-20 22:37

小辣椒 发表于 2025-4-20 22:36
好的，等我回来再研究了

{:4_190:}

红影 发表于 2025-4-20 22:38

小辣椒 发表于 2025-4-20 22:25
这歌我喜欢的，以前有分享过的

嗯嗯，好歌不厌百回听{:4_204:}

查看完整版本: 苦了累了听听歌 帖赠：东篱闲人