小辣椒 发表于 2024-5-24 15:53

套用玩个黑黑的 中3D的毒

<style>
    .pa { margin: 150px 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: 40px; height: 42px;background: url('https://wj.zp68.com/lxx/yunhua/2024/02/07/7.gif') 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: -140px;   width: 120%; height: 120%; 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://lk999.oss-cn-guangzhou.aliyuncs.com/Perfect.mp4" autoplay loop muted></video>
   <video id="vid" src="https://zgsy-1254134120.cos.ap-guangzhou.myqcloud.com/nswx.mp4" autoplay loop muted></video>
   <div id="lzpa"></div>
    <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/df/19/63/c4da7c5a77c4f0127cc3d0483bae285d/audio.mp3" 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-24 15:53

@马黑黑
谢谢黑黑的教程分享，小辣椒套用玩一个

小辣椒 发表于 2024-5-24 15:54

@红影

亲爱的，抄个作业，都是你的{:4_170:}

小辣椒 发表于 2024-5-24 15:55

@走过岁月

必须感谢岁月，小辣椒找视频素材确实笨，好在有岁月的东东，小辣椒可以秒做了

梦油 发表于 2024-5-24 16:12

小辣椒朋友选取的乐曲太美了。

小辣椒 发表于 2024-5-24 16:28

梦油 发表于 2024-5-24 16:12
小辣椒朋友选取的乐曲太美了。

是吗？谢谢梦油的认可，这曲子是纯音动感音乐

红影 发表于 2024-5-24 17:07

动态飞鸟做粒子，这个漂亮呢。两个视频也都很漂亮。这个太棒了，欣赏亲爱的好帖{:4_199:}

小辣椒 发表于 2024-5-24 17:28

红影 发表于 2024-5-24 17:07
动态飞鸟做粒子，这个漂亮呢。两个视频也都很漂亮。这个太棒了，欣赏亲爱的好帖

亲爱的，都是抄你的作业，就视频大小改了一下的{:4_170:}

马黑黑 发表于 2024-5-24 17:39

小辣椒 发表于 2024-5-24 15:53
@马黑黑
谢谢黑黑的教程分享，小辣椒套用玩一个

{:4_178:}

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

小辣椒 发表于 2024-5-24 17:28
亲爱的，都是抄你的作业，就视频大小改了一下的

不是啊，我也用的黑黑的代码啊{:4_173:}

起个网名好难 发表于 2024-5-24 20:21

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

朵拉 发表于 2024-5-24 20:23

优秀，向小辣椒好好学习{:4_204:}{:4_178:}

樵歌 发表于 2024-5-24 21:47

要是把中间转运的飞轮，换成那美女。所有飞鸟都围绕她转多好。。{:4_173:}

走过岁月 发表于 2024-5-25 13:56

小辣椒 发表于 2024-5-24 15:55
@走过岁月

必须感谢岁月，小辣椒找视频素材确实笨，好在有岁月的东东，小辣椒可以秒做了

不客气，好快就做出来，小辣椒棒棒的，必须赞

走过岁月 发表于 2024-5-25 13:57

每个效果跟音乐都很配，不错

梦油 发表于 2024-5-25 15:54

小辣椒 发表于 2024-5-24 16:28
是吗？谢谢梦油的认可，这曲子是纯音动感音乐

我也很喜欢音乐。

小辣椒 发表于 2024-5-25 21:38

梦油 发表于 2024-5-25 15:54
我也很喜欢音乐。

梦油也是多才多艺的{:4_177:}

小辣椒 发表于 2024-5-25 21:40

马黑黑 发表于 2024-5-24 17:39


黑黑我是晚上好{:4_187:}

小辣椒 发表于 2024-5-25 21:40

红影 发表于 2024-5-24 19:54
不是啊，我也用的黑黑的代码啊

那个粒子换图片我就抄你的

小辣椒 发表于 2024-5-25 21:41

起个网名好难 发表于 2024-5-24 20:21


问好难难，谢谢欣赏{:4_187:}
页: [1] 2
查看完整版本: 套用玩个黑黑的 中3D的毒