本帖最后由 花简静 于 2024-8-18 15:27 编辑
<style>
#tiezi { margin:130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/qsmyh.webp') no-repeat center/cover; box-shadow: 3px 3px 6px #000; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
#tiezi > canvas:nth-of-type(1) { position: absolute; top: 180px; cursor: pointer; }
#tiezi > video:nth-of-type(1) { position: absolute; right: -480px; top:460px; width: 100%; height: 30%;
mix-blend-mode: screen;filter: opacity(.26);clip-path: ellipse(300px 100px at center); }
#tiezi > img:nth-of-type(1) { position: absolute; right: 210px; bottom:180px;cursor: pointer; user-select: none;transform: rotate(90deg); mix-blend-mode: screen;opacity: .55; }
</style>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=29470947.mp3" autoplay></audio>
<img id="mypic" src="" alt="" />
<video src="https://img.tukuppt.com/video_show/15653652/01/27/12/62650aab384cc.mp4" loop muted></video>
<canvas width="180" height="180"></canvas>
</div>
<script>
//3dball.js放后面
var files = [
'https://638183.freep.cn/638183/web/js2024/lrc_only.js',
'https://638183.freep.cn/638183/web/js2024/3dball.js'
];
files.forEach((_, key) => {
var sF = document.createElement('script');
sF.charset = 'UTF-8';
sF.src = files[key];
document.body.appendChild(sF);
sF.onload = () => {
if(key === 0) {
LRC({
papa: '#tiezi',
lrc_css: 'bottom: 26px; --bg: linear-gradient(180deg, White, SlateGray);rgba(100,200,250,.65)); opacity: .3;font-size: 26px;color: #fff;',
lrcAr: geci
});
}
else mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
};
});
var lz = {papa: tiezi, total: 350, r: 4, color: 'rgba(211,211,211,.6)'};
let geci = [
[-4.29,"单曲：Only Time",1.8],
[6.07,"歌手：Enya",2.7],
[8.78,"所属专辑：天籁地球村 6",3.4],
[12.18,"Who can say where the road goes,",4.8],
[17.01,"Where the day flows",2.8],
[19.86,"Only time...",3.4],
[23.27,"And who can say if your love grows,",5.3],
[28.54,"As your heart chose",2.9],
[31.39,"Only time...",3.2],
[34.59,"(chants)",26.6],
[61.21,"Who can say why your heart sighs,",7.3],
[68.5,"As your love flies",2.4],
[70.9,"Only time...",1.8],
[72.7,"And who can say why your heart cries,",5.2],
[77.89,"When your love dies",2.9],
[80.77,"Only time...",6.9],
[87.64,"(chants)",22.9],
[110.57,"Who can say when the roads meet,",6.0],
[116.6,"That love might be,",1.9],
[118.51,"In your heart.",3.0],
[121.55,"And who can say when the day sleeps,",5.6],
[127.11,"If the night keeps all your hearts",6.8],
[133.95,"Night keeps all your heart...",8.8],
[142.79,"(extended chants)",15.7],
[158.44,"",6.3],
[164.7,"Who can say if your love grows,",4.5],
[169.23,"As your heart chose",3.1],
[172.3,"Only time...",2.9],
[175.24,"And who can say where the road goes,",5.5],
[180.77,"Where the day flows",3.1],
[183.87,"Only time...",5.1],
[189,"Who knows",1.3],
[190.3,"Only time...",3.0],
[193.27,"Who knows",2.1],
[195.35,"Only time...",6]
];
</script>
<br><br><br><br><br>
|
