论坛 › 音乐沙龙 › 嗨起来（学习黑黑《异族之舞》代码效果）

红影 发表于 2024-6-5 21:44

嗨起来（学习黑黑《异族之舞》代码效果）

<style>
#papa { margin: 60px 0 30px calc(50% - 721px); width: 1280px; height: 720px; overflow: hidden;position: relative; background: url('https://pic.imgdb.cn/item/665dd4315e6d1bfa0540e319.jpg') no-repeat center/cover; --state； }
#tzbox { left:0; top:120px; width: 600px; height: 400px; border: thick; overflow: hidden; box-sizing: border-box; position: absolute;-webkit-clip-path:polygon(0 0, 600px 130px, 600px 350px, 0px 400px); opacity: .5; }
#tzbox::before { position: absolute; content: ''; inset: 0; background: url('https://pic.imgdb.cn/item/665ddabd5e6d1bfa05499343.jpg') no-repeat center/cover; animation: shake .25s infinite alternate var(--state);}
#tzbox1 {right:0; top:120px;width: 600px; height: 400px; border: thick; overflow: hidden; box-sizing: border-box; position: absolute;-webkit-clip-path:polygon(0 0, 600px 130px, 600px 350px, 0px 400px); transform: rotateY(180deg); opacity: .5; }
#tzbox1::before { position: absolute; content: ''; inset: 0; background: url('https://pic.imgdb.cn/item/665ddabd5e6d1bfa05499343.jpg') no-repeat center/cover; animation: shake1 .25s infinite alternate var(--state);}
.vid { position: absolute; width: 100%; height: 110%; top: -50px; object-fit: cover; mix-blend-mode: hard-light; opacity: .9;}
.vid:nth-of-type(2) { width: 200px; height: 200px; right: 540px; top: 30px; border-radius: 50% 50%; box-shadow: 0 0 16px cyan; mix-blend-mode: normal; cursor: pointer; transition: .6s; }
.vid:nth-of-type(2):hover { transform: scale(1.1); }
@keyframes shake { to { inset: -20px; } }
@keyframes shake1 { to { inset: -20px; } }
</style>
<div id="papa">
<div id="tzbox"></div><div id="tzbox1"></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1816722048" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/45/5b4335dba123d_10s_big.mp4" loop muted disablePictureinPicture></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/73/5b495ddab7660_10s_big.mp4" autoplay loop muted disablePictureinPicture title="播放/暂停"></video>
</div>

<script>
(function() {
        const vids = document.querySelectorAll('.vid');
        var mState = () => {
                papa.style.setProperty('--state', ['running','paused'][+aud.paused]);
                vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
        };
        aud.onplaying = aud.onpause = () => mState();
        vids.onclick = () => aud.paused ? aud.play() : aud.pause();
       
})();
</script>

红影 发表于 2024-6-5 21:45

想加个底图，然后加两个可动的小图。结果弄出来是错的，折腾半天，总算折腾出来了{:4_173:}

红影 发表于 2024-6-5 21:46

感谢@马黑黑 的代码，一起嗨起来{:4_177:}

小文 发表于 2024-6-5 22:28

坐着慢慢欣赏！{:4_204:}{:4_191:}

马黑黑 发表于 2024-6-5 22:37

帖子的设计还是很巧妙的

樵歌 发表于 2024-6-6 08:04

真像极了南美洲的狂欢！

梦江南 发表于 2024-6-6 11:23

欣赏点赞.

梦油 发表于 2024-6-6 16:52

看了你的帖子，我都坐不住了。

南无月 发表于 2024-6-6 20:44

影子这个改过的动图效果太厉害了。。
原来是背景图片在跳动。现在背景换了一张图片，另外换了两张小图来跳动。。{:4_199:}

南无月 发表于 2024-6-6 20:46

这两张图片把它裁切成有空间感的形状，
这个裁切可是要根据图的大小和位置进行计算的，这个就是绝纱之笔 。。
反转左右对称，两边同时跳去，增添了动态效果。{:4_199:}

南无月 发表于 2024-6-6 20:48

两个动态视频找得特别合适，氛围感满满。。
构思一流，技术一流，效果一流，非常棒的贴子。。{:4_199:}

执著 发表于 2024-6-6 22:36

看着就很嗨！好似夜总会里的场面{:4_172:}{:4_204:}

红影 发表于 2024-6-6 23:10

小文 发表于 2024-6-5 22:28
坐着慢慢欣赏！

谢谢小文，跟着学习代码呢{:4_187:}

红影 发表于 2024-6-6 23:11

马黑黑 发表于 2024-6-5 22:37
帖子的设计还是很巧妙的

折腾了好半天，只不过加个背景，让小图动，弄起来还挺难{:4_173:}

红影 发表于 2024-6-6 23:11

樵歌 发表于 2024-6-6 08:04
真像极了南美洲的狂欢！

呵呵，跟师兄一起嗨起来{:4_173:}

红影 发表于 2024-6-6 23:12

梦江南 发表于 2024-6-6 11:23
欣赏点赞.

多谢梦江南鼓励{:4_187:}

红影 发表于 2024-6-6 23:12

梦油 发表于 2024-6-6 16:52
看了你的帖子，我都坐不住了。

那个一起嗨起来，活动一下对身体好呢{:4_173:}

红影 发表于 2024-6-6 23:13

南无月 发表于 2024-6-6 20:44
影子这个改过的动图效果太厉害了。。
原来是背景图片在跳动。现在背景换了一张图片，另外换了两张小图来跳 ...

就是简单的替换，结果还是折腾了一下，开始的思路有问题{:4_173:}

红影 发表于 2024-6-6 23:14

南无月 发表于 2024-6-6 20:46
这两张图片把它裁切成有空间感的形状，
这个裁切可是要根据图的大小和位置进行计算的，这个就是绝纱之笔...

这个做得不好看，但是想要达到的想法总算弄成了{:4_173:}

红影 发表于 2024-6-6 23:15

南无月 发表于 2024-6-6 20:48
两个动态视频找得特别合适，氛围感满满。。
构思一流，技术一流，效果一流，非常棒的贴子。。

月儿谬赞了，有你的鼓励，做帖时瞎折腾就更有动力了{:4_173:}{:4_179:}

查看完整版本: 嗨起来（学习黑黑《异族之舞》代码效果）