本帖最后由 花简静 于 2024-8-18 15:28 编辑
<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 = [
[0.1,"单曲：人世间",2.2],
[2.27,"电视剧《人世间》主题曲",2.0],
[4.31,"歌手：雷佳",1.0],
[5.33,"所属专辑：《人世间》电视剧原声带",1.1],
[6.44,"作词 : 唐恬",1.2],
[7.64,"作曲 : 钱雷",1.4],
[9,"编曲 : 钱雷",1.1],
[10.08,"制作人 : 钱雷",1.3],
[11.43,"学习黑师20240518《泽典 - 宿命》画布小播加歌词效果",10.7],
[22.1,"",7.4],
[29.1,"草木会发芽孩子会长大",5.4],
[37.02,"岁月的列车不为谁停下",4.3],
[44.08,"命运的站台悲欢离合都是刹那",6.4],
[51.35,"人像雪花一样飞很高又融化",4.8],
[58.02,"世间的苦啊爱要离散雨要下",4.7],
[65.01,"世间的甜啊走多远都记得回家",5.6],
[73.02,"平凡的我们撑起屋檐之下一方烟火",6.8],
[81.09,"不管人世间多少沧桑变化",5.3],
[87.17,"祝你踏过千重浪",2.8],
[90.08,"能留在爱人的身旁",3.5],
[94,"在妈妈老去的时光",3.1],
[97.06,"听她把儿时慢慢讲",3.8],
[101.04,"也祝你不忘少年样",3.5],
[104.9,"也无惧那白发苍苍",3.2],
[108.07,"若年华终将被遗忘记得你我",6.2],
[119.09,"火一样爱着",3.0],
[127.05,"人世间值得",3.0],
[130.05,"人世间值得",13.0],
[143.15,"Wu~~~~~~",12.9],
[156.01,"有多少苦乐就有多少种活法",5.8],
[163.01,"有多少变化太阳都会升起落下",6.0],
[171.03,"平凡的我们一身雨雪风霜不问去哪",7.0],
[179.07,"随四季枯荣依然迎风歌唱",5.7],
[185.38,"祝你踏过千重浪",2.9],
[188.69,"能留在爱人的身旁",3.1],
[192.16,"在妈妈老去的时光",3.3],
[195.94,"听她把儿时慢慢讲",3.6],
[199.5,"也祝你不忘少年样",3.2],
[203.03,"也无惧那白发苍苍",3.3],
[206.75,"我们啊像种子一样",3.2],
[210.79,"一生向阳",1.6],
[218.03,"在这片土壤",1.8],
[227.32,"随万物生长",4.7]
];
</script>
<br><br><br><br><br><br>
|
.gif)
