本帖最后由 花简静 于 2024-9-10 19:52 编辑
<style>
#qsfg28 {
margin: 130px 0 20px calc(50% - 931px) ;
width: 1700px;
height: 900px;
background: url('https://642303.freep.cn/642303/tu/lizihuafeng.webp') no-repeat center/cover;
overflow: hidden;
position: relative;
}
#player {
position: absolute;
left: 300px;
bottom: 300px;
width: 120px;
height: 120px;
cursor: pointer;
border-radius: 50%;
opacity: .5;
mix-blend-mode: multiply;
animation: rot 8s linear infinite var(--state);
z-index: 11;
}
li-zi {
position: absolute;
width: 10px;
height: 10px;
left: 300px;
bottom: 300px;
border-radius: 50%;
box-shadow: inset 0 0 10px lightblue;
background: DeepSkyBlue;
}
#vid {
position: absolute;
width: 120%;
height: 100%;
bottom:0px;
left:-260px;
filter: hue-rotate(10deg);
opacity: .79;
object-fit: cover;
mix-blend-mode: screen;
transform: rotateY(180deg);
-webkit-mask: linear-gradient(0deg, red 26%, transparent 55%, transparent);
}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes moving {
from { opacity: 1; transform: translate(0,0); }
to { opacity: 0.1; transform: translate(var(--x0),var(--y0)); }
}
</style>
<div id="qsfg28">
<video id="vid" src="https://img.tukuppt.com/video_show/2405811/00/02/05/5b4f7e5592a89.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2053239064" autoplay loop></audio>
<img id="player" alt="" src="https://pic.imgdb.cn/item/66cef103d9c307b7e9899792.gif" title="播放/暂停" />
</div>
<script>
for(let i = 0, all = 80; i < all; i++) {
let lz = document.createElement('li-zi');
let hudu = Math.PI / 180 * 360 / all * i;
let xx = 900 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
lz.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
left: 360px;
bottom: 360px;
animation: moving ${Math.random() * 6 + 6}s -${Math.random() * 6}s infinite var(--state);
`;
qsfg28.prepend(lz);
}
var mState = () => {
qsfg28.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.title = aud.paused ? '播放' : '暂停';
aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
qsfg28.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
