本帖最后由 花简静 于 2024-12-22 21:46 编辑
<style>
@import 'https://638183.freep.cn/638183/web/mod/aud_lrc.css';
#tz { --state: running; margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20241215NSX02.webp') no-repeat center/cover; }
#player { position: absolute;right:30%; width: 80px; height: 80px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(0,0,128,.05); cursor: pointer; display: grid; place-items: center; }
#mypic { width: 100%; height: 100%; opacity: .75; }
#prog { bottom: 30px; width: 280px; --bg1: silver; --bg2: lightblue; --color: lightblue; }
#lrc {left: 50%;transform: translateX(-50%);top: 30px; --bg: linear-gradient(Honeydew, #4e6753); color: silver;font: bold 2.0em cursive;opacity: .86; }
#fsbtn { bottom: 60px; }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply;webkit-mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; opacity: .25;}
@keyframes in1 {
0% { width: 0; height: 0; transform: rotate(0); }
60% { width: 100%; height: 100%; transform: rotate(-720deg) }
90% { width: 100%; height: 100%; transform: rotate(-720deg); }
100% { width: 0; height: 0; transform: rotate(0); }
}
@keyframes in2 {
0% { width: 0; height: 0; transform: rotate(0); }
60% { width: 100%; height: 100%; transform: rotate(720deg) }
90% { width: 100%; height: 100%; transform: rotate(720deg); }
100% { width: 0; height: 0; transform: rotate(0); }
}
</style>
<div id="tz" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1432959007"></audio>
<div id="player"><img id="mypic" src="https://638183.freep.cn/638183/t24/webp3/t1.webp" alt="" /></div>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="prog" class="prog" data-tt="00:00 00:00"></div>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/04/11/12/04/39/video66176157e9d04.mp4" autoplay loop muted></video>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { Aud } from 'https://638183.freep.cn/638183/web/mod/aud_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
var lrcAr = [
[-0.2,"单曲：藏于流年的抱憾",1.0],
[0.84,"歌手：柏松",1.1],
[1.91,"所属专辑：听闻余生",0.9],
[2.78,"作词 : 尹初七",0.9],
[3.65,"作曲 : 柏松",0.8],
[4.4,"制作人：柏松/任柯",0.7],
[5.07,"编曲：任柯",0.9],
[5.94,"和声：柏松",0.6],
[6.59,"录音师/混音师：李浩@集结社录音室",0.5],
[7.13,"母带：BenWang/SeaSide Mastering",0.7],
[7.8,"学习黑师20241215《瞳》图片轮转图片小播效果",3.8],
[16.09,"昨夜饮酒几盏 饮酒几盏",5.7],
[23.09,"醉于流年 醉于某个世俗眉眼",5.0],
[29.45,"余生慢慢 你已走出时间",4.4],
[35.06,"天地之间 不知归途塌陷",4.8],
[41.07,"星辰明暗 明明暗暗",5.4],
[47.01,"寂寥旁观 你是其中最亮一盏",4.9],
[52.6,"若能到达荆棘丛生的彼岸",4.8],
[58.05,"是否与你还能再次相见",5.9],
[70.07,"知晓伤口愈合简单",3.5],
[76.49,"仍要留点溃烂",2.9],
[82.03,"所以孤身一人静候黑夜霜寒",5.0],
[88.2,"反正你来的些许慢",3.5],
[94.07,"知晓余生还有抱憾",3.5],
[99.01,"仍要费心留恋",2.8],
[102.17,"所以天高路远只换大梦好眠",5.7],
[110.04,"反正只是百年孤单",3.8],
[114.04,"",20.8],
[138.08,"昨夜饮酒几盏 饮酒几盏",5.2],
[144.91,"醉于流年 醉于某个世俗眉眼",4.5],
[150.92,"余生慢慢 你已走出时间",4.5],
[156.04,"天地之间 不知归途塌陷",5.3],
[162.62,"星辰明暗 明明暗暗",5.3],
[169.02,"寂寥旁观 你是其中最亮一盏",4.3],
[174.16,"若能到达荆棘丛生的彼岸",4.9],
[180.18,"是否与你还能再次相见",5.2],
[192,"知晓伤口愈合简单",3.1],
[198.1,"仍要留点溃烂",2.9],
[203.91,"所以孤身一人静候黑夜霜寒",4.7],
[209.48,"反正你来的些许慢",3.6],
[216.06,"知晓余生还有抱憾",2.9],
[220.06,"仍要费心留恋",3.0],
[223.02,"所以天高路远只换大梦好眠",6.6],
[234.01,"知晓伤口愈合简单",3.2],
[239.99,"仍要留点溃烂",3.1],
[245.89,"所以孤身一人静候黑夜霜寒",4.8],
[251.08,"反正你来的些许慢",4.0],
[258.27,"知晓余生还有抱憾",2.8],
[262.7,"仍要费心留恋",2.3],
[265.04,"所以天高路远只换大梦好眠",6.5],
[274,"反正只是百年孤单",3.4]
];
var audio = new Aud(tz, player, lrcAr);
audio.play();
fscreen.fs(tz, fsbtn);
var picIdx = 0, gapTime = 10000, anis = ['in1', 'in2'];
var picAr = [
'https://638183.freep.cn/638183/t24/webp3/t1.webp',
'https://638183.freep.cn/638183/t24/webp3/t2.webp',
'https://638183.freep.cn/638183/t24/webp3/t3.webp',
'https://638183.freep.cn/638183/t24/webp3/t4.webp',
];
var showPics = (pics) => {
mypic.src = pics[picIdx];
mypic.style.animation = `${anis[picIdx % 2]} ${gapTime}ms forwards var(--state)`;
picIdx = (picIdx + 1) % pics.length;
};
setInterval( () => {
if(!aud.paused) showPics(picAr);
}, gapTime);
showPics(picAr);
</script>
|
