【黑师代码】一生所爱（学习黑师2024617《Do You Feel》及歌词同步简化效果）
本帖最后由 南无月 于 2024-6-19 17:48 编辑 <br /><br /><style>#tz { margin: 30px 0 30px calc(50% - 731px);width: 1300px; height: 800px; background: #eee; box-shadow: 2px 2px 6px gray; overflow: hidden; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; bottom: 0; width: 100%; height: 60px; text-align: center; font: normal 24px/60px sans-serif; color: transparent; background: repeating-linear-gradient(to right, red, green, blue, green, red) 50%/200px 60px; -webkit-background-clip: text; }
#player { position: absolute; top: 30px; left: calc(50% - 61px); cursor: pointer; animation: rot 6s linear infinite var(--state); z-index: 9;}
.vid { position: absolute; pointer-events: none; }
.vid:nth-of-type(1) { top:-100px; width: 110%; height:110%;}
.vid:nth-of-type(2) {top:-100px; width: 110%; height:110%; opacity: .15;transform: rotateY(180deg);}
.vid:nth-of-type(3) { right: 580px; top: 20px; width: 140px; height: 140px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 60px black; cursor: pointer; z-index: 10;mix-blend-mode: screen;}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="tz" data-lrc="HUACHAO PLAYER">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1429962105" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/17/88/5ed0a6a88bcd9.mp4" autoplay loop muted disablePictureInPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4854b8add7c.mp4" autoplay loop muted disablePictureInPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/36/5d1ec3ab75a31.mp4" autoplay loop muted disablePictureInPicture></video>
<img id="player" src="https://638183.freep.cn/638183/t23/btn/plum.png" alt="" title="播放/暂停" />
</div>
<script>
var curkey = 0, lrcAr = [];
var vids = document.querySelectorAll('.vid');
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
});
};
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr) {
tz.dataset.lrc = lrcAr;
curkey ++;
}
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var lrc = `
张子铭 - 一生最爱
向雪怀作词，伍思凯作曲
吉他:白毛
如果痴痴的等某日终于可等到一生中最爱
谁介意你我这段情每每碰上了意外不清楚未来
何曾愿意 我心中所爱
每天要孤单看海
宁愿一生都不说话都不想讲假说话欺骗你
留意到你我这段情你会发觉间隔着一点点距离
无言地爱 我偏不敢说
说一句想跟你一起
OOOH OOH
如真 如假 如可分身饰演自己
会将心中的温柔献出给你唯有的知己
如痴 如醉 还盼你懂珍惜自己
有天即使分离我都想你我 真的想你
宁愿一生都不说话都不想讲假说话欺骗你
留意到你我这段情你会发觉间隔着一点点距离
无言地爱 我偏不敢说
说一句想跟你一起
OOOH OOH
如真 如假 如可分身饰演自己
会将心中的温柔献出给你唯有的知己
如痴 如醉 还盼你懂珍惜自己
有天即使分离我都想你我 真的想你
如真 如假 如可分身饰演自己
会将心中的温柔献出给你唯有的知己
如痴 如醉 还盼你懂珍惜自己
有天即使分离我都想你我 真的想你
如果痴痴的等某日终于可等到一生中最爱
`;
getAr(lrc);
</script>
@马黑黑 老师来瞧一眼，看到你站里发的歌词，移植过来，速成一贴。{:4_170:} 欣赏老师音画佳作！{:4_199:} 月儿厉害，把两个组合到一起了，而且很完美{:4_199:} 歌词用#tz::before干嘛，应该可以用#tz::after的吧，这样就不用留位置也不怕被压了吧{:4_173:} 月儿聪明，把第三个视频弄到小播上去了，别说，还挺协调呢{:4_199:} 梦江南 发表于 2024-6-18 14:29
欣赏老师音画佳作！
感谢临贴支持。。{:4_190:} 红影 发表于 2024-6-18 14:35
月儿厉害，把两个组合到一起了，而且很完美
{:4_170:}乱组没组好，被老师批了的。。 红影 发表于 2024-6-18 14:37
歌词用#tz::before干嘛，应该可以用#tz::after的吧，这样就不用留位置也不怕被压了吧
嗯哪，影子说得在理。。不过这贴视频用了昨天的留边用用也行。 红影 发表于 2024-6-18 14:38
月儿聪明，把第三个视频弄到小播上去了，别说，还挺协调呢
这个也是昨天的小播，直接移过去了，没改{:4_170:} 南无月 发表于 2024-6-18 12:52
@马黑黑 老师来瞧一眼，看到你站里发的歌词，移植过来，速成一贴。
{:4_178:} 马黑黑 发表于 2024-6-18 20:59
老师这千斤顶又用上了。。
看你回复我以为把你气得懒得理我了{:4_170:} 南无月 发表于 2024-6-18 17:49
乱组没组好，被老师批了的。。
没事啊，效果好就是好啊{:4_187:} 马黑黑 发表于 2024-6-18 20:59
送杯酒喝吧。这小白学生太费劲了{:4_191:} 南无月 发表于 2024-6-18 22:14
老师这千斤顶又用上了。。
看你回复我以为把你气得懒得理我了
回复帖子我一向随意，记得就回，不记得就会错过 南无月 发表于 2024-6-18 17:51
嗯哪，影子说得在理。。不过这贴视频用了昨天的留边用用也行。
是的，这效果也很不错的呢，也是一种构思的方式{:4_204:} 红影 发表于 2024-6-18 22:15
没事啊，效果好就是好啊
{:4_170:}没好，批得一塌糊涂。我得重新改 南无月 发表于 2024-6-18 17:51
这个也是昨天的小播，直接移过去了，没改
但是你用来修饰小播后，效果特别好呢{:4_187:} 马黑黑 发表于 2024-6-18 22:15
回复帖子我一向随意，记得就回，不记得就会错过
没事，不回的话我会去闹你的{:4_170:} 红影 发表于 2024-6-18 22:15
是的，这效果也很不错的呢，也是一种构思的方式
其实是抄的代码原本就是这样，刚好那贴也是这样。。{:4_173:}