《归途》TO小九（学习黑黑《秋恋》之管状进度条播放器）
<style>
#hy {
margin: 60px 0 30px calc(50% - 721px);
width: 1280px;
height: 700px;
background: url('https://pic.imgdb.cn/item/66c13d20d9c307b7e92ec109.jpg') no-repeat center/cover;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
display: grid;
place-items: center;
position: relative;
}
#hy > video {
position: absolute;
width: 100%;
height: calc(100% + 120px);
object-fit: cover;
opacity: .35;
mix-blend-mode: screen;
pointer-events: none;
}
</style>
<div id="hy" class="hy">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1400146044" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2422006/00/02/21/5b5441d6e6893_10s_big.mp4" autoplay loop muted></video>
</div>
<script>
var geci = `《归途》演唱：陈俊威\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而今你我，依然还是自己吗`;
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/tube_yslrc.js';
document.body.appendChild(sf);
sf.onload = () => {
HCPlayer({
papa: '#hy',
geci: geci,
skip: 0,
average: -1.2,
lrc_css: 'top: 50px; left: 70px; --bg: url("https://pic.imgdb.cn/item/66c145d6d9c307b7e93597b7.jpg"); color: #fcedbb; font: bold 3.3em STLiti;',
player_css: 'width: 260px; height: 6px; bottom: 30px; left: 610px; --prog: red; --track: gray; --color: yellow; --bg: repeating-conic-gradient(red 20%, yellow 40%);',
fs_css: 'right: 20px; bottom: 20px; --bg: transparent; --color: Gray;'
});
};
</script> 学习播放器按钮用锥形渐变制作；歌词用图片做背景，并且改变字体，使用了华文隶书，不知道能否有效果。
感谢@马黑黑 的代码{:4_187:} 看到九儿的《愿时光能缓》，很有感慨，感觉这首歌适合送给九儿。@小九 {:4_187:}
“曾经不慌不忙的我们好奇这一切，能够不卑不亢认真翻看着世界。”
“曾经空空行囊我们未曾想妥协”，如今我们已有成就，却对这世界有了更多的迷惘。
祝九儿找到自己的路，继续坚定地走下去{:4_187:} 管状进度条正好和播放器按钮颜色一致，就没再修改颜色。
歌词底图本来想找个动态小图，感觉颜色变化再用动图有点乱，就找了个静态小图{:4_173:} 好美，特别有意境！ 歌词好漂亮。 赏图听歌来了！{:4_187:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 整体配色走色彩反差路线，这需要高超的管控颜色能力。帖子布局自然得体，与歌曲的深情很配套。 梦江南 发表于 2024-8-18 10:08
好美，特别有意境！
谢谢江南鼓励，我主要是在学代码呢{:4_173:} 梦江南 发表于 2024-8-18 10:09
歌词好漂亮。
把歌词调了一下，用底图来代替颜色设置，然后改变了一下字体{:4_204:} 梦江南 发表于 2024-8-18 10:09
赏图听歌来了！
这首歌我也是第一次听，随手找的{:4_173:} 起个网名好难 发表于 2024-8-18 10:25
谢谢难难鼓励{:4_187:} 马黑黑 发表于 2024-8-18 10:32
整体配色走色彩反差路线，这需要高超的管控颜色能力。帖子布局自然得体，与歌曲的深情很配套。
哇，我也能学着管控颜色了啊，太开心了。谢谢黑黑{:4_187:} 歌词色彩特别耀眼，好看{:4_205:} 整体效果特别靓丽，彩色的画面突出效果，真棒！{:4_178:} 谢谢影子！{:5_150:}画面很美很有意境，喜欢！{:4_187:} 色彩搭配也很好看，特别{:4_204:}是那片红叶 红影 发表于 2024-8-18 10:05
看到九儿的《愿时光能缓》，很有感慨，感觉这首歌适合送给九儿。@小九
“曾经不慌不忙的我们 ...
谢谢影子鼓励！{:5_150:}
生活原本就是不断选择，选择自己想要的，，又适合自己的，走在路上，唯有相信，唯有坚持。{:4_204:} 小辣椒 发表于 2024-8-18 13:28
歌词色彩特别耀眼，好看
谢谢亲爱的，是随手找的歌词下的背景图呢{:4_173:}
页:
[1]
2