窗外

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #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%; }
   
3. #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; }
   
4. #mydiv:hover::before { opacity: .8; transform: scale(.5); }
   
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; }
   
6. </style>
   
7. 
   
8. <div id="mydiv">
   
9.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1867133102" autoplay loop></audio>
   
10.         <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/78/5e61212dad135.mp4" autoplay loop></video>
    
11. </div>  
    
12. 
    
13. <script>
    
14. (function() {
    
15.         let step = 1, x0 = 50;
    
16.         let mState = () => aud.paused ? vid.pause() : vid.play();
    
17.         let clipBg = () => {
    
18.                 x0 += step;
    
19.                 if(x0 >= 100 || x0 <= 0) step = -step;
    
20.                 mydiv.style.setProperty('--x0', x0 + '%');
    
21.         };
    
22.         mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
23.         aud.addEventListener('playing', mState, false);
    
24.         aud.addEventListener('pause', mState, false);
    
25.         aud.addEventListener('timeupdate', clipBg, false);
    
26. })();
    
27. </script>

复制代码

千羽

窗外有美景，窗内有 美人

马黑黑

千羽 发表于 2024-1-22 19:53
窗外有美景，窗内有 美人

千羽

这个效果真好，喜欢的部分收藏了，黑黑老师棒棒哒

千羽

马黑黑 发表于 2024-1-22 19:53

黑黑 老师好创意，好制作，厉害

朵拉

马师好，这是遮罩效果么，漂亮 学习

起个网名好难

                               
登录/注册后可看大图

马黑黑

朵拉 发表于 2024-1-22 20:05
马师好，这是遮罩效果么，漂亮 学习

不是。这是两张图片重叠，顶层那张动态切割且旋转。

马黑黑

千羽 发表于 2024-1-22 19:55
这个效果真好，喜欢的部分收藏了，黑黑老师棒棒哒

马黑黑

千羽 发表于 2024-1-22 19:56
黑黑 老师好创意，好制作，厉害

果酱果酱

马黑黑

起个网名好难 发表于 2024-1-22 20:21

晚上好

红影

看了半天，这个裁剪和calc() 竟然能弄出旋转的效果来，厉害

红影

从js里才知道，这个--x0是带百分比的，动态只用这一个变化值就能控呢

红影

再看，原来是剪切的4个点的变化，--x0在0和100间变化，当是0时，是充满的长方形，是50%试，是四个点都在各条边中点的菱形，100%时同0，其他状态在这其中变化，周而复始。

红影

两张图图很相配呢，这个制作好看，这个构思更好看

马黑黑

红影 发表于 2024-1-22 20:56
再看，原来是剪切的4个点的变化，--x0在0和100间变化，当是0时，是充满的长方形，是50%试，是四个点都在各 ...

研究出来了

马黑黑

红影 发表于 2024-1-22 20:56
两张图图很相配呢，这个制作好看，这个构思更好看

JS部分略微修改了一下：变向旋转时停留二秒钟。这里就不改了。代码如下：

1. <script>
   
2. (function() {
   
3.         let step = 1, x0 = 50, change = true;
   
4.         let mState = () => aud.paused ? vid.pause() : vid.play();
   
5.         let clipBg = () => {
   
6.                 if(!change) return;
   
7.                 x0 += step;
   
8.                 if(x0 > 100 || x0 < 0) {
   
9.                         step = -step;
   
10.                         change = false;
    
11.                         setTimeout( () => change = true, 2000);
    
12.                 }
    
13.                 mydiv.style.setProperty('--x0', x0 + '%');
    
14.         };
    
15.         mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
    
16.         aud.addEventListener('playing', mState, false);
    
17.         aud.addEventListener('pause', mState, false);
    
18.         aud.addEventListener('timeupdate', clipBg, false);
    
19. })();
    
20. </script>

复制代码

红影

马黑黑 发表于 2024-1-22 21:15
研究出来了

嗯嗯，多看了几遍，看明白了

红影

马黑黑 发表于 2024-1-22 21:18
JS部分略微修改了一下：变向旋转时停留二秒钟。这里就不改了。代码如下：

2秒是这样留出来的啊，让change = false; 2秒后再= true ，嗯，记下了