论坛 › 欢乐水吧 › 地狱少女

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

地狱少女

本帖最后由 马黑黑 于 2024-1-23 20:51 编辑 <br /><br /><style>
#mydiv { position: relative; margin: -70px 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>

马黑黑 发表于 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>

樵歌 发表于 2024-1-23 13:32

很是奇妙，那轮回中的少女随老鼠位置不同而变幻。{:4_173:}

大漠孤烟 发表于 2024-1-23 14:37

有意境

清茶煮雪 发表于 2024-1-23 15:59

这个特效，太神奇太高深了{:4_174:}

清茶煮雪 发表于 2024-1-23 16:00

黑黑代码音画大师{:4_178:}厉害了

岁月·如歌 发表于 2024-1-23 16:20

主题有点恐怖{:4_189:}

梦油 发表于 2024-1-23 16:48

出类拔萃的特技制作令人拍案叫绝！

亦是金 发表于 2024-1-23 18:46

纯欣赏！学习不了！{:4_198:}

红影 发表于 2024-1-23 19:27

这个好奇特，用8个点的多边形，竟然能弄出这样的效果来。鼠标 还原颜色和移动位置的设计也很巧妙，可以让小图放在一边自己观赏它的变化了{:4_199:}

红影 发表于 2024-1-23 19:34

视屏的裁剪也有趣，直接切掉了右上角啊。你确定那20%的三角就能切干净？{:4_173:}

红影 发表于 2024-1-23 19:35

最奇特的是小图的x0超过50%后，开始有其他拼块，我去看看这个怎么出来的

红影 发表于 2024-1-23 19:46

随便取了个大于50%的值去画了一下，原来是四条平行线，部分点连线时需要走边线，是行走路径导致的分块吧。这个拼成整图时也有个2秒的暂停，然后才继续的{:4_187:}

红影 发表于 2024-1-23 19:48

切割原来有这么多有趣的表现，那个窗外的4个点的已经觉得挺神奇了，这个更神奇{:4_199:}

红影 发表于 2024-1-23 19:52

发现这个多边形各点的取点顺序很有讲究，好像只有8才有这样对称效果，6和10都不行，当然16估计也行。

千羽 发表于 2024-1-23 21:25

这个看点有点让人担心啊，那帅收握一锋利大刀对着女孩……{:4_203:}

千羽 发表于 2024-1-23 21:29

这幽深的山林中……背景图挺好的，气氛渲染出来了，黑黑老师是超强大脑{:4_181:}

马黑黑 发表于 2024-1-23 21:55

千羽 发表于 2024-1-23 21:25
这个看点有点让人担心啊，那帅收握一锋利大刀对着女孩……

{:4_170:}

马黑黑 发表于 2024-1-23 21:55

千羽 发表于 2024-1-23 21:29
这幽深的山林中……背景图挺好的，气氛渲染出来了，黑黑老师是超强大脑

音乐就是地狱少女

马黑黑 发表于 2024-1-23 21:56

红影 发表于 2024-1-23 19:52
发现这个多边形各点的取点顺序很有讲究，好像只有8才有这样对称效果，6和10都不行，当然16估计也行。

不论做多少条边的多边形，可以先做一个样子出来，然后找到各点可能的变化规律，再设置算法，用 calc 去实现

查看完整版本: 地狱少女