【黑师代码】人世间（学习黑师20240518《泽典 - 宿命》画布小播加歌词效果）
<style>
#mydiv { margin: 130px 0 20px calc(50% - 931px); display: grid; place-items: center; width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20240512fx02.webp') no-repeat center/cover; overflow: hidden; border: 1px solid gray; position: relative; }
#player { position: absolute; bottom: 60px; }
#lrc { position: absolute; bottom: 20px;opacity: .5;}
.vid{position: absolute; bottom: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; mix-blend-mode: screen; opacity: .3;}
li-zi { position: absolute; width: 20px; height: 20px; border-radius: 0 50%; background: url('https://642303.freep.cn/642303/tu/c88747f820d857d2_133600001812182500.png') no-repeat center/cover; opacity: .6;}
@keyframes moving { from { opacity: 0; transform: rotate(0) translate(0,0); } to { opacity: .6; transform: rotate(180deg) translate(var(--x0),var(--y0)); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1915875397" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" loop muted></video>
<canvas id="player" width="400" height="90"></canvas>
<canvas id="lrc" width="800" height="30"></canvas>
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_518.js';
document.body.appendChild(sF);
var all = 360;
for(var i = 0; i < all; i++) {
var lz = document.createElement('li-zi');
var hudu = Math.PI / 180 * 360 / all * i;
var xx = 1000 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
var size = Math.random() * 10 + 5;
lz.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
width: ${size}px;
height: ${size}px;
animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
`;
mydiv.prepend(lz);
}
var colors = {track: 'SaddleBrown', prog: 'snow', lrc1: 'snow', lrc2: 'SaddleBrown'};
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script>
<br><br><br><br><br><br><br><br><br><br>
@马黑黑 给白老师交一份今天的作业{:4_170:} 整套照抄，粒子换成了雪花。别的没动。。{:4_187:} 南无月 发表于 2024-5-18 22:33
@马黑黑 给白老师交一份今天的作业
{:4_199:} 很赞的作品 把粒子变成了雪花，月儿厉害，这样的粒子更漂亮了{:4_199:} 歌曲非常好听，听了好几遍。帖子的氛围也特别好。飘飞的视频效果也特别好。很感人的帖子{:4_199:} 这视频选的，好像后面朦胧的灯光活了似的，很让人惊叹{:4_199:} 马黑黑 发表于 2024-5-18 22:44
{:4_205:}我可以乐一下不 马黑黑 发表于 2024-5-18 22:45
很赞的作品
这个更概括了{:4_170:} 南无月 发表于 2024-5-19 17:24
这个更概括了
{:4_181:} 南无月 发表于 2024-5-19 17:24
我可以乐一下不
那当然可以 马黑黑 发表于 2024-5-19 17:25
{:4_189:}你都是对的 马黑黑 发表于 2024-5-19 17:25
那当然可以
昨天乐到今天了，不乐都不行 红影 发表于 2024-5-18 23:47
把粒子变成了雪花，月儿厉害，这样的粒子更漂亮了
代码支持换图片，很是惊喜{:4_187:} 南无月 发表于 2024-5-19 17:51
代码支持换图片，很是惊喜
月儿想到去换图片，这点很厉害呢{:4_187:} 南无月 发表于 2024-5-19 17:40
昨天乐到今天了，不乐都不行
应该乐乐 马黑黑 发表于 2024-5-19 19:47
应该乐乐
同乐呗{:4_170:} 红影 发表于 2024-5-19 18:50
月儿想到去换图片，这点很厉害呢
图片如果换不上，只能把粒子整成雪粒了{:4_170:} 红影 发表于 2024-5-19 00:00
歌曲非常好听，听了好几遍。帖子的氛围也特别好。飘飞的视频效果也特别好。很感人的帖子
歌曲是人世间的主题曲，很感人的一部电视剧