红影 发表于 2024-5-23 22:18

《奇异世界的穿行》（学习黑黑跟着中3D的毒）

<style>
    .pa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 700px; box-shadow: 3px 3px 6px gray; border-radius: 6px; overflow: hidden; z-index: 1; position: relative; }
    #lzpa { position: absolute; left: calc(50% - 150px); top: 120px; width: 400px; height: 180px; cursor: pointer; }
    li-zi { position: absolute; width: 34px; height: 30px;background: url('https://pic.imgdb.cn/item/664f05fad9c307b7e92f68d7.png') no-repeat center/cover; opacity: .9;offset-path: path('M0 100 A200 100 0 1 1 400 100 A200 100 0 1 1 0 100'); animation: move 10s linear infinite var(--state), size 10s linear infinite var(--state); }
        #vid { position: absolute; left: calc(50% - 35px); top: calc(50% - 215px); width: 160px; height: 160px; border-radius: 50%; pointer-events: none; mix-blend-mode: color-dodge; object-fit: cover; }
        #vid1 { position: absolute; left: 0px; top: 0px;   width: 108%; height: 100%; object-fit: cover; }
    @keyframes move { to { offset-distance: 100%; } }
    @keyframes size { 0%, 50%, 100% { transform: scale(1) rotateY(20deg); } 25% { transform: scale(0.7)rotateY(10deg); } 75% { transform: scale(1.5)rotateY(0deg); } }
</style>

<div class="pa">
   <video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/03c764b4c0a85e45029896e0dfe604ff_preview.mp4" autoplay loop muted></video>
   <video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/13/5b51547541e5b_10s_big.mp4" autoplay loop muted></video>
   <div id="lzpa"></div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1900053905" autoplay loop></audio>
</div>

<script>
    var total = 12;
    for(var i = 0; i < total; i ++) {
       var lz = document.createElement('li-zi');
      lz.style.cssText += `
            animation-delay: -${10 / total * i}s;
         
      `;
      lzpa.appendChild(lz);
    }

    var mState = () => {
      lzpa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.paused ? vid.pause() : vid.play();
      aud.paused ? vid1.pause() : vid1.play();
    };

    aud.onplaying = aud.onpause = () => mState();

    lzpa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-5-23 22:19

去试跟着玩，之前视频停不下来，回帖时忽然想到是哪里做了，去改了一下，终于能停了{:4_173:}

红影 发表于 2024-5-23 22:20

跟着黑黑学习《中了3d的毒》的效果，谢谢@马黑黑 的代码{:4_187:}

马黑黑 发表于 2024-5-23 22:31

红影 发表于 2024-5-23 22:19
去试跟着玩，之前视频停不下来，回帖时忽然想到是哪里做了，去改了一下，终于能停了

联动控制视频、关键帧动画的那个指令，不论用id控制单个，还是通过 class 控制多个，都应该总结下来了，以备不时之需

马黑黑 发表于 2024-5-23 22:32

红影 发表于 2024-5-23 22:20
跟着黑黑学习《中了3d的毒》的效果，谢谢@马黑黑 的代码

@keyframes 中可以考虑不需要 rotateY(xxdeg) 看看效果是不是更好

红影 发表于 2024-5-23 23:00

马黑黑 发表于 2024-5-23 22:31
联动控制视频、关键帧动画的那个指令，不论用id控制单个，还是通过 class 控制多个，都应该总结下来了， ...

嗯嗯，是的。我开始视频用了nth-of-type去加载的，弄乱了，后来一个个来倒是好了。

红影 发表于 2024-5-23 23:00

马黑黑 发表于 2024-5-23 22:32
@keyframes 中可以考虑不需要 rotateY(xxdeg) 看看效果是不是更好

我把30度改成0度，看看效果差不多呢{:4_173:}

马黑黑 发表于 2024-5-23 23:33

红影 发表于 2024-5-23 23:00
我把30度改成0度，看看效果差不多呢

那就不用折腾

马黑黑 发表于 2024-5-23 23:34

红影 发表于 2024-5-23 23:00
嗯嗯，是的。我开始视频用了nth-of-type去加载的，弄乱了，后来一个个来倒是好了。

nth-of-type 可以很方便地去控制第几个，但是指向要明确，一般是通过 class 属性，或某父元素下的一级子元素什么的

红影 发表于 2024-5-24 10:57

马黑黑 发表于 2024-5-23 23:33
那就不用折腾

黑黑提醒得对，这些细节之前都忘了去调整一下呢{:4_173:}

红影 发表于 2024-5-24 10:59

马黑黑 发表于 2024-5-23 23:34
nth-of-type 可以很方便地去控制第几个，但是指向要明确，一般是通过 class 属性，或某父元素下的一级子 ...

嗯嗯，这个和控制要能对应才好。

马黑黑 发表于 2024-5-24 12:11

红影 发表于 2024-5-24 10:59
嗯嗯，这个和控制要能对应才好。

必须对应才行

马黑黑 发表于 2024-5-24 12:11

红影 发表于 2024-5-24 10:57
黑黑提醒得对，这些细节之前都忘了去调整一下呢

没事

小辣椒 发表于 2024-5-24 14:41

亲爱的，这个效果进来就惊呆了，太漂亮了{:4_199:}

小辣椒 发表于 2024-5-24 14:43

好佩服你们找视频效果的本领，想问问这个视频你输入的关键字是什么

小辣椒 发表于 2024-5-24 14:44

怎么看，这个效果都是非常的好，场景大气，人物灵动，好制作，必须赞！

小辣椒 发表于 2024-5-24 14:46

中3D的毒 还有这个教程分享啊，我去看看

红影 发表于 2024-5-24 19:21

马黑黑 发表于 2024-5-24 12:11
必须对应才行

之前就是对应有问题，才停不下来的{:4_173:}

红影 发表于 2024-5-24 19:22

马黑黑 发表于 2024-5-24 12:11
没事

理论上应该所有细节都考虑到了才好。

红影 发表于 2024-5-24 19:22

小辣椒 发表于 2024-5-24 14:41
亲爱的，这个效果进来就惊呆了，太漂亮了

正好找到一个视频，就用来做这个了{:4_173:}
页: [1] 2
查看完整版本: 《奇异世界的穿行》（学习黑黑跟着中3D的毒）