《寒夜方舟》（学习黑黑 午夜怨曲 代码效果）

红影

HUA CHAO PLAYER

红影

在本地测试和pencil code里测试都正常的，到论坛里视频出问题了@马黑黑

起个网名好难

欣赏好帖。

歌词的位置靠边些是不是会更好些。

马黑黑

效果：寒夜方舟 (52qingyin.cn)代码：（仅改变 @keyframes swear部分数据）

1. <style>
   
2. #tz { margin: 30px 0 30px calc(50% - 601px); width: 1200px; height: 700px; background: url('https://pic.imgdb.cn/item/6667f9aed9c307b7e9aefb5a.jpg') no-repeat center/cover; border-radius: 18px; box-shadow: 2px 2px 6px gray; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
   
3. #lrc { position: absolute; top: 40px; right: 400px; font: normal 30px sans-serif; text-shadow: 1px 1px 1px white; background: linear-gradient(to bottom, red, Orchid, DeepSkyBlue,  Orchid, Orange); writing-mode: vertical-rl; background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(-1px -1px 6px gray); user-select: none; animation: swear 6s linear infinite alternate var(--state);  rotateZ(-25deg);}
   
4. #player { position: absolute; left: calc(50% - 200px); bottom: 20px; width: 400px; height:10px; background: linear-gradient(to right, var(--color) var(--prg), transparent 0); border: 1px solid var(--color); border-radius: 6px; display: grid; place-items: center; --color: rgba(77, 149, 203, .8); --prg: 0%; --btnSize: 120px;}
   
5. #player::before, #player::after { position: absolute; content: ''; }
   
6. #player::before { width: var(--btnSize); height: var(--btnSize); top: calc(var(--btnSize) * -1 - 25px); background: url('https://pic.imgdb.cn/item/666817a4d9c307b7e9ddbb09.png') no-repeat center/cover; animation: rot 6s linear infinite var(--state);}
   
7. #player::after { content: attr(data-time); inset: -30px 0 10px 0; text-align: justify; text-align-last: justify; font-size: 14px; color: var(--color); pointer-events: none; }
   
8. .vid { position: absolute; top: -60px; left: 100px; width: 110%; height: calc(100% + 160px); object-fit: cover; mix-blend-mode: screen; opacity: .3; pointer-events: none; transform: rotate(-20deg); }
   
9. @keyframes rot { to { transform: rotate(360deg); } }
   
10. @keyframes swear {
    
11.         from { transform: perspective(400px) rotateX(30deg) rotateZ(-25deg); }
    
12.         to { transform: perspective(400px) rotateX(-30deg) rotateZ(25deg); }
    
13. }
    
14. </style>
    
15. 
    
16. <div id="tz">
    
17. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=34057953.mp3" autoplay loop></audio>
    
18. <video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/91/5b4d7c5becb5a_10s_big.mp4" autoplay loop disablePictureInPicture muted></video>
    
19. <div id="lrc">HUA CHAO PLAYER</div>
    
20. <div id="player"></div>
    
21. </div>
    
22. 
    
23. <script>
    
24. var script = document.createElement('script');
    
25. script.charset = 'utf-8';
    
26. script.src = 'https://638183.freep.cn/638183/web/js2024/tube3dlrc.js';
    
27. document.body.appendChild(script);
    
28. var lrcAr = [[0.06,"《寒夜方舟》歌手大若 ",4.7],[4.86,"所属专辑：三体系列 ",4.7], [9.86,"太空高边塞深邃似海 ",4.7], [14.56,"踽踽独行 身若尘埃",4.8], [19.33,"使命的承载 无情无奈 ",4.7], [24,"宛若陨石 天地中开",4.8], [28.79,"真相都掩埋 这段独白 ",4.6], [33.41,"伴那血色 献给未来",4.8], [38.2,"寒夜灯火与谁同徘徊 ",4.6], [42.83,"终局莫须等待最后的",5.7], [48.56,"对望 凝成皓如星辰的",5.9], [54.43,"军章镌刻磐石般不变",4.5], [58.98,"信仰 彼处彼方 定有",4.8], [63.8,"灯火闪亮文明的音响",6.2], [70.02,"在迷离之中斑驳凄凉",4.6], [74.65,"诀别钟声起伏时不曾",4.6], [79.22,"悲伤 任他 风 和 霜",4.6], [83.85,"此去之后 明日苍茫",19.1], [102.98,"漫步在星河不尽夜色 ",4.3], [107.33,"算这一生 终究是客",4.4], [111.75,"死神的枷锁未来定格 ",4.3], [116.05,"叹无人相伴 这抉择",4.4], [120.49,"存在与缄默生死相握 ",4.3], [124.76,"命运之轮转于 此刻",4.5], [129.26,"恒星风中如惊鸿掠过 ",4.3], [133.52,"诀别不须骊歌啊寒夜",5.4], [138.96,"的方舟一去天涯征程",4.4], [143.39,"无尽头像荒原中遗世",4.4], [147.74,"的火种 溶入星空 此别",5.3], [153.05,"并无重逢期盼的瞳孔 ",5.6], [158.61,"末日来时骤然地冷冻",4.4], [163.01,"唯有新生 播撒在那",3.3], [166.33,"星海中  使命已告终",5.3], [171.62,"默然相送 最后之梦",14.3], [185.92,"黑暗的法则 是谁最先",4.1], [190.05,"勘破壮士悲歌未彻",3.7], [193.72,"凝望那抹血色并无",4.3], [198.04,"悲欢离合只生的选择",40.3], [238.32,"寒夜的方舟航线直指",4.3], [242.65,"星空的尽头是泪和血",4.3], [246.96,"洗尽了脆弱 重燃星火 ",5.4], [252.35,"让掌心也温热生死都",5.3], [257.66,"割舍 只顾前行莫问",2.9], [260.6,"去路难测黑暗森林中",4.4], [265.04,"如灯塔指引你我莫忘",4.8], [269.87,"这支歌　永恒之歌 ",6.1], [275.95,"诺亚之舟 长照山河",6]];
    
29. </script>

复制代码

红影

起个网名好难 发表于 2024-6-11 18:30
欣赏好帖。

歌词的位置靠边些是不是会更好些。

我想让歌词像被太空舰队携带的感觉，我调的离飞船更近点了，难难再看看这样如何

红影

醉美水芙蓉 发表于 2024-6-11 18:56
欣赏红影精彩美贴！

谢谢水芙蓉美女鼓励

南无月

影子的贴子就是帅！非常大气的作品，辽阔壮观，效果绝美

梦油

欣赏佳作，问候红影。

南无月

直接把歌词方向角度都改了，
更符合在宇宙中飘摇飞行的效果
小播的形状和颜色也与整体更加协调。。。

起个网名好难

红影 发表于 2024-6-11 20:57
我想让歌词像被太空舰队携带的感觉，我调的离飞船更近点了，难难再看看这样如何

这样就很不错了。原来没看出那里还有飞船

红影

马黑黑 发表于 2024-6-11 20:57
效果：寒夜方舟 (52qingyin.cn)代码：（仅改变 @keyframes swear部分数据）

这个也不行，我去看了，在你那里可以的，我在本地测试也可以。我把这个代码复制到论坛的试帖里去测试，仍然是看不到视频啊。

红影

马黑黑 发表于 2024-6-11 20:57
效果：寒夜方舟 (52qingyin.cn)代码：（仅改变 @keyframes swear部分数据）

我本来想把竖向歌词加到JS里去，省得有影响，然后发现JS里的汉字都是乱码，就没敢去动这个心思，怕改后上传也出问题

红影

南无月 发表于 2024-6-11 21:00
影子的贴子就是帅！非常大气的作品，辽阔壮观，效果绝美

没弄好，视频出不来了，也不知道怎么回事

红影

梦油 发表于 2024-6-11 21:02
欣赏佳作，问候红影。

谢谢梦油，我就是跟着瞎玩呢

绿叶清舟

漂亮影这歌词是要飞了啊

红影

南无月 发表于 2024-6-11 21:03
直接把歌词方向角度都改了，
更符合在宇宙中飘摇飞行的效果
小播的形状和颜色也与整体更加协调。。。{:4_ ...

其实想学习一下怎么改方向，倒是改出来了，结果还是碰到问题了

红影

起个网名好难 发表于 2024-6-11 21:11
这样就很不错了。原来没看出那里还有飞船

开始离飞船比较远是用视频填充效果的，现在视频出不来，索性离飞船近点了

小辣椒

亲爱的，效果非常好，我也是电脑预览了一下。特棒！

小辣椒

视频电脑预览有的，这里没有看见了