《寒夜方舟》（学习黑黑 午夜怨曲 代码效果）
<style>#tz { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 700px; background: url('https://pic.imgdb.cn/item/6667f9aed9c307b7e9aefb5a.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px gray; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
#lrc { position: absolute; top: 30px; right: 640px; 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 3s linear infinite alternate var(--state);rotateZ(-28deg);}
#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(39, 170, 168, .8); --prg: 0%; --btnSize: 120px;}
#player::before, #player::after { position: absolute; content: ''; }
#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; filter: hue-rotate(328deg); animation: rot 6s linear infinite var(--state);}
#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; }
.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); }
.vid:nth-of-type(2) { bottom: 0; width: 100%; height: calc(100% + 60px); transform: rotate(0deg); mix-blend-mode: screen; opacity: .3; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes swear {
from { transform: perspective(400px) rotateX(0deg) rotateZ(-28deg); }
to { transform: perspective(400px) rotateX(-40deg) rotateZ(-28deg); }
}
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=34057953.mp3" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/91/5b4d7c5becb5a_10s_big.mp4" autoplay loop disablePictureInPicture muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/85/69/60ff8be36ed3c_10s_big.mp4" autoplay loop disablePictureInPicture muted></video>
<div id="lrc">HUA CHAO PLAYER</div>
<div id="player"></div>
</div>
<script>
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/js2024/tube3dlrc.js';
document.body.appendChild(script);
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script> 在本地测试和pencil code里测试都正常的，到论坛里视频出问题了@马黑黑 {:4_173:} 欣赏好帖。
歌词的位置靠边些是不是会更好些。 效果：寒夜方舟 (52qingyin.cn)代码：（仅改变 @keyframes swear部分数据）
<style>
#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; }
#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);}
#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;}
#player::before, #player::after { position: absolute; content: ''; }
#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);}
#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; }
.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); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes swear {
from { transform: perspective(400px) rotateX(30deg) rotateZ(-25deg); }
to { transform: perspective(400px) rotateX(-30deg) rotateZ(25deg); }
}
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=34057953.mp3" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/91/5b4d7c5becb5a_10s_big.mp4" autoplay loop disablePictureInPicture muted></video>
<div id="lrc">HUA CHAO PLAYER</div>
<div id="player"></div>
</div>
<script>
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/js2024/tube3dlrc.js';
document.body.appendChild(script);
var lrcAr = [,, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
</script>
起个网名好难 发表于 2024-6-11 18:30
欣赏好帖。
歌词的位置靠边些是不是会更好些。
我想让歌词像被太空舰队携带的感觉，我调的离飞船更近点了，难难再看看这样如何{:4_173:} 醉美水芙蓉 发表于 2024-6-11 18:56
欣赏红影精彩美贴！
谢谢水芙蓉美女鼓励{:4_187:} 影子的贴子就是帅！非常大气的作品，辽阔壮观，效果绝美{:4_187:} 欣赏佳作，问候红影。 直接把歌词方向角度都改了，
更符合在宇宙中飘摇飞行的效果
小播的形状和颜色也与整体更加协调。。。{:4_199:} 红影 发表于 2024-6-11 20:57
我想让歌词像被太空舰队携带的感觉，我调的离飞船更近点了，难难再看看这样如何
这样就很不错了。原来没看出那里还有飞船{:5_117:} 马黑黑 发表于 2024-6-11 20:57
效果：寒夜方舟 (52qingyin.cn)代码：（仅改变 @keyframes swear部分数据）
这个也不行，我去看了，在你那里可以的，我在本地测试也可以。我把这个代码复制到论坛的试帖里去测试，仍然是看不到视频啊。{:5_102:} 马黑黑 发表于 2024-6-11 20:57
效果：寒夜方舟 (52qingyin.cn)代码：（仅改变 @keyframes swear部分数据）
我本来想把竖向歌词加到JS里去，省得有影响，然后发现JS里的汉字都是乱码，就没敢去动这个心思，怕改后上传也出问题{:4_173:} 南无月 发表于 2024-6-11 21:00
影子的贴子就是帅！非常大气的作品，辽阔壮观，效果绝美
没弄好，视频出不来了，也不知道怎么回事{:4_173:} 梦油 发表于 2024-6-11 21:02
欣赏佳作，问候红影。
谢谢梦油，我就是跟着瞎玩呢{:4_173:} 漂亮影这歌词是要飞了啊 南无月 发表于 2024-6-11 21:03
直接把歌词方向角度都改了，
更符合在宇宙中飘摇飞行的效果
小播的形状和颜色也与整体更加协调。。。{:4_ ...
其实想学习一下怎么改方向，倒是改出来了，结果还是碰到问题了{:4_173:} 起个网名好难 发表于 2024-6-11 21:11
这样就很不错了。原来没看出那里还有飞船
开始离飞船比较远是用视频填充效果的，现在视频出不来，索性离飞船近点了{:4_173:} 亲爱的，效果非常好，我也是电脑预览了一下。特棒！{:4_178:} 视频电脑预览有的，这里没有看见了