地狱少女

马黑黑 · 发表于 2024-1-23 12:21

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-1-23 20:51 编辑

马黑黑 · 发表于 2024-1-23 12:22

本帖最后由马黑黑于 2024-1-23 20:52 编辑

帖子代码

<style>
#mydiv { position: relative; margin: 0 0 0 calc(50% - 561px); width: 960px; height: 600px; background: url('https://638183.freep.cn/638183/t24/jpg/hell0.jpg') no-repeat center/cover; box-shadow: 4px 4px 12px #333; overflow: hidden; cursor:pointer; --x0: 0; }
#mydiv::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/jpg/hellgirl.jpg') no-repeat center/cover; mix-blend-mode: luminosity; clip-path: polygon(0 var(--x0), var(--x0) 0, calc(100% - var(--x0)) 0, 100% var(--x0), 100% calc(100% - var(--x0)), calc(100% - var(--x0)) 100%, var(--x0) 100%, 0 calc(100% - var(--x0))); transition: all .6s; }
#mydiv:hover::before { mix-blend-mode: unset; transform: scale(.5) translate(360px,-180px); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: fill; mix-blend-mode: screen; clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%); pointer-events: none; }
</style>
<div id="mydiv" title="播放/暂停">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=533063" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/25/51/62417fd483ea3.mp4" loop></video>
</div>
<script>
(function() {
let step = 1, x0 = 0 , change = true;
let mState = () => aud.paused ? vid.pause() : vid.play();
let clipBg = () => {
if(!change) return;
x0 += step;
if(x0 > 100 || x0 < 0) {
step = -step;
change = false;
setTimeout( () => change = true, 2000);
}
mydiv.style.setProperty('--x0', x0 + '%');
};
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', clipBg, false);
})();
</script>