本帖最后由 花简静 于 2024-8-18 15:46 编辑
<style>
#mydiv {
--width: 1700px;
margin: 130px 0 30px calc(50% - (var(--width) / 2 + 90px));
width: var(--width);
height: 900px;
background: url('https://pic.imgdb.cn/item/66b8c02ad9c307b7e9a48f66.webp') no-repeat center/cover;
border: 1px solid Tan;
z-index: 1;
overflow: hidden;
position: relative;
box-shadow: 0 0 10px rgba(139,69,19,.5);
}
#vid {
position: absolute;
bottom: 22%;
left:9.5%;
width: 100%;
height: 50%;
object-fit: conver;
border-radius: 50%;
mix-blend-mode: screen;
pointer-events: none;
opacity: .78;
-webkit-mask: linear-gradient(to top right, red 70%, transparent 73.5%, transparent 0);
}
#player {
position: absolute;
left: calc(50% + 100px);
top: calc(50% - 100px);
width: 80px;
height: 80px;
cursor: pointer;
opacity: .99;
filter: blur(0px);
animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to {transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1824995549" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/18/05/5ed870ed14fc5.mp4" muted autoplay loop></video>
<img id="player" src="https://pic.imgdb.cn/item/65c0a8f19f345e8d03032e45.png" title="播放/暂停" alt="" /><br>
</div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#mydiv',
css: 'bottom: -120px; left: 50%; transform: translate(-50%); --color: Peru; --fsBg: transparent;',
});
var mState = () => {
mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
