本帖最后由 花简静 于 2024-8-18 15:43 编辑
<style>
#mydiv {
margin: 130px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://pic.imgdb.cn/item/66af4a6fd9c307b7e97c8a8e.jpg') no-repeat center/cover;
box-shadow: 0 0 6px rgba(0,0,0,.6);
user-select: none;
z-index: 1;
position: relative;
--pos: 0.1%;
}
#mydiv::after {
position: absolute;
content: '';
inset: 0;
background: url('https://pic.imgdb.cn/item/66af4a7fd9c307b7e97ca1e3.jpg') no-repeat center/cover;
-webkit-mask: linear-gradient(to top right, red var(--pos), transparent calc(var(--pos) + 5%), transparent);
}
#player {
position: absolute;
left: calc(50% - 61px);
width: 120px;
height: 120px;
top: 161px;
left:120px;
cursor: pointer;
transition: 1.2s;
z-index: 2;
animation: rot 6s linear infinite var(--state);
}
#player:hover { filter: drop-shadow(0 0 50px Gold); }
#vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .66;
-webkit-mask: linear-gradient(to top right, red 90%, transparent 91%, transparent 0);
mix-blend-mode: screen;
}
@keyframes rot {
to { transform: rotate(1turn); }
}
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1341912654" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/02/19/5b51ba0769bd4.mp4" autoplay loop muted></video>
<img id="player" alt="" title="播放/暂停" src="https://pic.imgdb.cn/item/65c0a8f19f345e8d03032e45.png" />
</div>
<script>
var zStep = 0.2, zVal = 0, zDo = false;
zMask = () => {
zVal += zStep;
if(zVal > 100 || zVal < -5) zStep = -zStep;
setTimeout( () => {
mydiv.style.setProperty('--pos', zVal + '%');
if(zDo) zMask();
}, 20);
};
mState = () => {
mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = '点击' + ['暂停','播放'][+aud.paused];
aud.paused ? vid.pause() : vid.play();
zDo = aud.paused;
};
mydiv.onmouseover = (e) => {
if(e.target.id.toLowerCase() !== 'mydiv' || aud.paused) return;
zDo = true;
zMask();
};
mydiv.onmouseout = () => zDo = false;
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
