窗外
<style>#mydiv { position: relative; margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 750px; background: url('https://638183.freep.cn/638183/t24/jpg/w0.jpg') no-repeat center/cover; box-shadow: 4px 4px 12px #000; overflow: hidden; z-index: 1; cursor: pointer; --x0: 50%; }
#mydiv::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/jpg/w1.jpeg') no-repeat center/cover; clip-path: polygon(var(--x0) 0, 100% var(--x0), calc(100% - var(--x0)) 100%, 0 calc(100% - var(--x0))); transition: all .65s; }
#mydiv:hover::before { opacity: .8; transform: scale(.5); }
#vid { position: absolute; top: -65px; width: 100%; height: calc(100% + 65px); width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1867133102" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/78/5e61212dad135.mp4" autoplay loop></video>
</div>
<script>
(function() {
let step = 1, x0 = 50;
let mState = () => aud.paused ? vid.pause() : vid.play();
let clipBg = () => {
x0 += step;
if(x0 >= 100 || x0 <= 0) step = -step;
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>
帖子代码
<style>
#mydiv { position: relative; margin: 20px 0 20px calc(50% - 681px); width: 1200px; height: 750px; background: url('https://638183.freep.cn/638183/t24/jpg/w0.jpg') no-repeat center/cover; box-shadow: 4px 4px 12px #000; overflow: hidden; z-index: 1; cursor: pointer; --x0: 50%; }
#mydiv::before { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/jpg/w1.jpeg') no-repeat center/cover; clip-path: polygon(var(--x0) 0, 100% var(--x0), calc(100% - var(--x0)) 100%, 0 calc(100% - var(--x0))); transition: all .65s; }
#mydiv:hover::before { opacity: .8; transform: scale(.5); }
#vid { position: absolute; top: -65px; width: 100%; height: calc(100% + 65px); width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1867133102" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/78/5e61212dad135.mp4" autoplay loop></video>
</div>
<script>
(function() {
let step = 1, x0 = 50;
let mState = () => aud.paused ? vid.pause() : vid.play();
let clipBg = () => {
x0 += step;
if(x0 >= 100 || x0 <= 0) step = -step;
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>
窗外有美景，窗内有 美人{:4_173:} 千羽 发表于 2024-1-22 19:53
窗外有美景，窗内有 美人
{:4_172:} 这个效果真好，喜欢的部分收藏了，黑黑老师棒棒哒{:4_187:} 马黑黑 发表于 2024-1-22 19:53
黑黑 老师好创意，好制作，厉害{:4_181:} 马师好，这是遮罩效果么，漂亮 学习{:4_190:} https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif 朵拉 发表于 2024-1-22 20:05
马师好，这是遮罩效果么，漂亮 学习
不是。这是两张图片重叠，顶层那张动态切割且旋转。 千羽 发表于 2024-1-22 19:55
这个效果真好，喜欢的部分收藏了，黑黑老师棒棒哒
{:4_180:} 千羽 发表于 2024-1-22 19:56
黑黑 老师好创意，好制作，厉害
果酱果酱 起个网名好难 发表于 2024-1-22 20:21
晚上好 看了半天，这个裁剪和calc() 竟然能弄出旋转的效果来，厉害{:4_199:} 从js里才知道，这个--x0是带百分比的，动态只用这一个变化值就能控呢{:4_187:} 再看，原来是剪切的4个点的变化，--x0在0和100间变化，当是0时，是充满的长方形，是50%试，是四个点都在各条边中点的菱形，100%时同0，其他状态在这其中变化，周而复始。 两张图图很相配呢，这个制作好看，这个构思更好看{:4_199:} 红影 发表于 2024-1-22 20:56
再看，原来是剪切的4个点的变化，--x0在0和100间变化，当是0时，是充满的长方形，是50%试，是四个点都在各 ...
研究出来了{:4_199:} 红影 发表于 2024-1-22 20:56
两张图图很相配呢，这个制作好看，这个构思更好看
JS部分略微修改了一下：变向旋转时停留二秒钟。这里就不改了。代码如下：
<script>
(function() {
let step = 1, x0 = 50, 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>
马黑黑 发表于 2024-1-22 21:15
研究出来了
嗯嗯，多看了几遍，看明白了{:4_173:} 马黑黑 发表于 2024-1-22 21:18
JS部分略微修改了一下：变向旋转时停留二秒钟。这里就不改了。代码如下：
2秒是这样留出来的啊，让change = false; 2秒后再= true ，嗯，记下了{:4_187:}