帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #000 url('https://638183.freep.cn/638183/t24/1/moya.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); display: grid; place-items: center; overflow: hidden; user-select: none; position: relative; }
#papa::before { position: absolute; content: ''; left: -100%; top: -100%; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/1/moya0.jpg') no-repeat center/cover; opacity: 0; transition: 5s; }
#papa:hover::before { left: 0; top: 0; opacity: 1; }
.play { position: absolute; left: 694px; top: 20px; width: 200px; animation: rot 6s linear infinite var(--state); z-index: 9; cursor: pointer; }
.play:nth-of-type(2) { left: 132px; filter: hue-rotate(120deg); }
#papa video { position: absolute; top: -200px; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
#papa video:nth-of-type(2) { top: 0; border-radius: 0 30%; opacity: .5; }
@Keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2040200174" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2475824/00/01/58/5b56a385e42de.mp4" loop muted></video>
<video src="https://img.tukuppt.com/video_show/2475824/00/01/68/5b48425912ddd.mp4" loop muted></video>
<img class="play" src="https://638183.freep.cn/638183/t24/leaf/5l.png" alt="" />
<img class="play" src="https://638183.freep.cn/638183/t24/leaf/5l.png" alt="" />
</div>
<script>
var loadJs = (file, callback) => {
let sc = document.createElement('script');
sc.src = file;
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => callback();
};
var js1 = 'https://638183.freep.cn/638183/web/api/lrc.js';
var js2 = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
loadJs(js1, () => {
LRC({
papa: '#papa',
lrcAr: lrcAr,
btn: '.play',
lrc_css: 'bottom: 20px;',
});
});
loadJs(js2, () => {});
lz = {papa: '#papa', total: 40, maxsize: 20, speed: 1, move: true};
let lrcAr = [
[3,"Moya Brennan - Show Me", 10],
[20,"莫雅·布伦南,爱尔兰民歌歌手、作曲家、<br>竖琴师、慈善家,她是恩雅的大姐"],
[60,"词曲 :Ross Cullum/Moya Brennan"],
[74,"Watch the crowd, time stranger",5.1],
[81.76,"There's dust around my eyes",4.6],
[89.56,"Watch the blind man won't stumble",5.0],
[97.26,"Tell me no more lies",5.2],
[104.9,"Show me the way, where I belong",6.0],
[112.37,"Please show me the way to find you",7.1],
[120.34,"Show me the way to hear your song",6.7],
[136.09,"Touch my hand, time stranger",4.9],
[143.7,"How far the mist on line",4.2],
[151.5,"Touch the tombstone won't crumble",5.2],
[159.13,"Tell me one more time",4.1],
[166.75,"Show me the way, where I belong",5.8],
[174.22,"Please show me the way to find you",7.1],
[182.24,"Show me the way to hear your song",6.8],
[228.73,"Show me the way, where I belong",6.5],
[236.21,"Please show me the way to find you",6.9],
[244.17,"Show me the way to hear your song",6.6]
];
papa.onclick = () => lz.move = !aud.paused;
</script>
|