走在冷雨里 歌手：艺凌 （学习黑黑独立版LRC歌词同步竖排效果）
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 80px; --bg: #eee url('https://wj.zp68.com/lxx/yunhua/2025/08/18/8.jpg') no-repeat center/100% 100%; --ma-size: 8%; }
#ma { right: 35%;top:71%; }
#btnFs { right:30px; bottom: 30px; color: #eee; }
#lrc {right: 10%;top: 100px; letter-spacing: 4px; writing-mode: vertical-rl; font:normal 1.6em Microsoft YaHei; sans-serif; color:DarkKhaki;}
#lrc::before { width: 100%; height: 0; background: url('https://wj.zp68.com/lxx/yunhua/2025/08/18/bjs.jpg') center; background-clip: text;-webkit-background-clip: text; }
#plane1{position: absolute;left: 250px;top: 0;width: 40px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T950 10");animation: move 10s linear infinite;}
#plane2 {position: absolute;left: 250px;top: 0;width: 40px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T0 10");animation: move 10s linear infinite;}
@keyframes move { to { offset-distance: 100%;} }
@keyframes rot { to { transform: rotate(-360deg); } }
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
@keyframes cover2 { from { height: 0; }to { height: 100%; } }
</style>
<div id="pa">
<img id="plane1" alt="" src="https://wj.zp68.com/lxx/yunhua/2025/08/18/niao.gif" />
<img id="plane2" alt="" src="https://wj.zp68.com/lxx/yunhua/2025/08/18/niao.gif" />
<audio id="audio" src="https://aod.cos.tx.xmcdn.com/storages/d557-audiofreehighqps/33/44/GKwRIJIK7YAXACAAAAMjB32n.m4a" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/02/34/5b56b9d9dfec9.mp4" autoplay loop muted></video>
<img id="ma" class="hue-rotate" src="https://wj.zp68.com/lxx/yunhua/2025/08/18/ann.png" alt="" />
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [['0.00', '走在冷雨里-艺凌',5.31],
['5.59', '词曲：隔壁老陈',2.12],
['7.82', '编曲：李胜华',2.06],
['9.99', '合唱：毅然合唱团',2.04],
['12.14', '混音：毅然音乐',2.36],
['14.62', '制作人：陈金文',1.62],
['16.33', 'OP：星汉马文化 ',2.46],
['18.92', '走在冷雨里',4.77],
['23.94', '苦苦找寻往日的甜蜜',6.07],
['30.33', '冷风一阵阵',4.65],
['35.22', '吹不散我心中的忧虑',6.00],
['41.54', '为什么你要狠心地离去',5.37],
['47.19', '我不明白错在了哪里',5.36],
['52.83', '如果我伤了你',2.60],
['55.57', '不是我故意',2.56],
['58.26', '我真的爱你不想放弃',2.89],
['61.30', '只想和你在一起',2.63],
['64.07', '求求你不要不要再生气',5.34],
['69.69', '快快回到我的怀抱里',5.42],
['75.40', '歌词同步编辑：小辣椒',16.05],
['92.30', '走在冷雨里',4.80],
['97.35', '苦苦找寻往日的甜蜜',5.96],
['103.62', '凄风一阵阵',4.72],
['108.59', '吹不散我心中的忧虑',6.01],
['114.92', '为什么你要把我来抛弃',5.37],
['120.57', '你给我太多太多的回忆',5.35],
['126.20', '如果我伤了你',2.72],
['129.06', '不是我故意',2.45],
['131.64', '我真的爱你真的想你',2.77],
['134.56', '只盼情缘能再续',2.76],
['137.46', '求求你不要不要再怀疑',5.37],
['143.11', '我的生命里不能没有你',5.63],
['149.04', '歌词同步编辑：小辣椒',21.38],
['171.55', '为什么你要把我来抛弃',5.22],
['177.05', '你给我太多太多的回忆',5.37],
['182.70', '如果我伤了你',2.72],
['185.56', '不是我故意',2.51],
['188.20', '我真的爱你真的想你',2.79],
['191.14', '只盼情缘能再续',2.66],
['193.94', '求求你不要不要再怀疑',5.39],
['199.61', '我的生命里不能没有你',5.97],
['205.79', '谢谢欣赏',4.09],
['225.07', '',4.5]];
FS(pa, ma);
lrc(pa, geci);
</script>
黑黑我这个代码 1~7行、35~36行删掉后自己电脑预览效果也是出来的
@马黑黑 也是个旧图，歌曲也是以前做过的，看看竖的歌词效果挺好的，就学习做一次
感谢黑黑源码分享{:4_187:} 小辣椒 发表于 2025-8-25 21:04
黑黑我这个代码 1~7行、35~36行删掉后自己电脑预览效果也是出来的
@马黑黑
出来好 马黑黑 发表于 2025-8-25 21:06
出来好
纯套用，加了二只代码飞鸟，把歌词一次颜色换了图片，就这样简单做了 本帖最后由 偶然~ 于 2025-8-25 21:38 编辑 <br /><br />每次打开小辣椒的作品都像拆开一份视觉礼物！这次将艺凌《走在冷雨里》的痛彻心扉，用粒子雨丝和冷暖色碰撞呈现得淋漓尽致——飘落的雨滴是破碎的回忆，朦胧光晕里藏着未说完的"我真的爱你"，连歌词里"凄风一阵阵"都被你幻化成风中摇曳的蒲公英，把忧伤都酿成了诗意。 特别震撼1分23秒的合唱高潮处，小辣椒让画面突然绽开暖色烟火，恰如歌词"只盼情缘能再续"的炙热呐喊，这种声画同步的细节处理堪称教科书级！最后渐暗的雨中路灯，又巧妙呼应"生命里不能没有你"的余韵，看完忍不住把合唱版循环了整整三遍呢~ 论坛有小辣椒这双会讲故事的手，连冷雨都变得温柔起来，下次要不要试试把歌词里的"往日的甜蜜"做成动态照片墙？已经搬好小板凳等新作啦！ 感谢小辣椒带来的精彩，辛苦了~！ 偶然~ 发表于 2025-8-25 21:36
本帖最后由 偶然~ 于 2025-8-25 21:38 编辑 每次打开小辣椒的作品都像拆开一份视觉礼物！这次将艺凌《走在 ...
哇塞，偶然你太会说话了{:4_172:} 偶然~ 发表于 2025-8-25 21:36
特别震撼1分23秒的合唱高潮处，小辣椒让画面突然绽开暖色烟火，恰如歌词"只盼情缘能再续"的炙热呐喊，这种 ...
偶然你太会欣赏了，看见烟火了？还是暖色烟火{:4_205:} 偶然~ 发表于 2025-8-25 21:37
论坛有小辣椒这双会讲故事的手，连冷雨都变得温柔起来，下次要不要试试把歌词里的"往日的甜蜜"做成动态照片 ...
耐心等待吧，现在小辣椒做帖是蜗牛的速度{:4_170:} 偶然~ 发表于 2025-8-25 21:37
感谢小辣椒带来的精彩，辛苦了~！
谢谢偶然欣赏，小辣椒准备看看就下了 这样的画面太美了，视频效果也好。竖排歌词的同步变幻也漂亮。
欣赏亲爱的好帖，这个太美了{:4_199:} 小辣椒 发表于 2025-8-25 21:24
纯套用，加了二只代码飞鸟，把歌词一次颜色换了图片，就这样简单做了
{:4_190:} 凄美的画面，一首真情的歌曲，好美啊！{:4_187:} 欣赏小辣椒的精美音画。多注意休息哦。{:4_204:} 飞舞的大雁为画面增色不少。{:5_116:}
页:
[1]