本帖最后由 花简静 于 2024-4-16 20:11 编辑
<style>
#mydiv { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: lightgreen url('https://642303.freep.cn/642303/tu/toyu.webp') no-repeat center/cover; box-shadow: 4px 4px 8px gray; box-sizing: border-box; overflow: hidden; z-index: 1; position: relative;}
#play { position: absolute; width: 100px; right: calc(26% - 100px); bottom: 180px; opacity: .7; cursor: pointer; animation: rotating 5s linear infinite var(--state);z-index: 100; }
#vid {
position: absolute;
right: 0;
width: 100%;
height: 110%;
bottom:-180px;
object-fit: cover;
mix-blend-mode: screen;
opacity: .80;
pointer-events: none;
transform: rotateX(180deg);
}
canvas { z-index: 99; pointer-events: none; }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=495562302" autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/70/22/607f0a9c8e2cf.mp4" muted loop></video>
<img id="play" src="https://638183.freep.cn/638183/small/ujye.webp" alt="" />
</div>
<script>
let sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
document.body.appendChild(sF);
let lz = {papa: 'body', total: 100, maxsize: 20, speed: 1, move: false};
var ww = mydiv.offsetWidth;
var step = 0.5, begin1 = 0, begin2 = ww, raf;
aud.loop = false;
aud.onpause = aud.onplaying = () => moving();
aud.onseeked = () => cancelAnimationFrame(raf);
aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };
play.onclick = () => { aud.paused ? aud.play() : aud.pause(); };
var moving = () => {
begin1 -= step;
begin2 -= step;
if(begin1 <= -ww) begin1 = ww;
if(begin2 <= -ww) begin2 = ww;
let b2 = begin2 + (begin1 >= 0 ? 1 : -1);
mydiv.style.setProperty('--begin1', begin1 + 'px');
mydiv.style.setProperty('--begin2', b2 + 'px');
aud.paused
? (cancelAnimationFrame(raf), mydiv.style.setProperty('--state', 'paused'), vid.pause())
: (raf = requestAnimationFrame(moving), mydiv.style.setProperty('--state', 'running'),vid.play());
lz.move = !aud.paused;
};
</script>
<br><br><br><br><br><br>
| 
