小辣椒 发表于 2024-5-9 21:22

动感效果（学习套用黑黑烟花封装效果）


<style>
        #papa { margin: 120px 0 20px calc(50% - 721px); width: 1280px; height: 700px; background: lightblue; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; }
        #canv { position: absolute; mix-blend-mode: screen; }

        #player { position: absolute; bottom: 60px; left: calc(2% - 6px); width: 100px; cursor: pointer; animation: rot 5s linear infinite var(--state); }
.vid { position: absolute; object-fit: cover; mix-blend-mode: ; pointer-events: none; }
       
            .vid:nth-of-type(1) { position: absolute; bottom: 0; width: 100%; height: calc(100% + 160px); object-fit: cover; }
.vid:nth-of-type(2) { bottom: 0; left:120px; width: 1040px; height: 170px; z-index: 3; border-radius: 20%;opacity: .55;}

        @keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">

        <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/05/09/ER.mp3" autoplay></audio>
        <video class="vid" src="https://vlkv-1254134120.cos.ap-guangzhou.myqcloud.com/Riot%20On%20the%20Dancefloor.mp4" loop muted></video>

<video class="vid" src="https://vlkv-1254134120.cos.ap-guangzhou.myqcloud.com/VINAI%20SCNDL%20FRONTIER.mp4" muted loop></video>


        <canvas id="canv" width="1280" height="500"></canvas>
        <img id="player" src="https://wj.zp68.com/lxx/yunhua/2024/05/09/516.png" alt="" />
</div>

<script>
        var sF = document.createElement('script');
        sF.src = 'https://638183.freep.cn/638183/web/js/fireframes.js';
        sF.charset = 'utf-8';
        document.body.appendChild(sF);
        var pa = papa, lz = 180, flash = false;
        player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2024-5-9 21:22

@马黑黑

黑黑套用玩一个{:4_173:}

小辣椒 发表于 2024-5-9 21:23

@走过岁月

岁月用了你的二个AE视频制作{:4_205:}

马黑黑 发表于 2024-5-9 21:23

妙不可言

马黑黑 发表于 2024-5-9 21:23

88

小辣椒 发表于 2024-5-9 21:50

马黑黑 发表于 2024-5-9 21:23
妙不可言
黑黑代码的功劳{:4_177:}

小辣椒 发表于 2024-5-9 21:51

马黑黑 发表于 2024-5-9 21:23
88

哈哈，你速度的{:4_170:}

马黑黑 发表于 2024-5-9 21:51

小辣椒 发表于 2024-5-9 21:51
哈哈，你速度的

{:4_196:}

马黑黑 发表于 2024-5-9 21:52

小辣椒 发表于 2024-5-9 21:50
黑黑代码的功劳

主要是你设计的好

小辣椒 发表于 2024-5-9 21:54

马黑黑 发表于 2024-5-9 21:52
主要是你设计的好

开始用了小球的音乐，感觉不错的，发现下面频谱不能对应就用了下面频谱的音乐，这样反正用一个就只能一个同步了

小辣椒 发表于 2024-5-9 21:54

马黑黑 发表于 2024-5-9 21:51


{:4_180:}

马黑黑 发表于 2024-5-9 21:55

小辣椒 发表于 2024-5-9 21:54


谢茶。今晚不加班

马黑黑 发表于 2024-5-9 21:55

小辣椒 发表于 2024-5-9 21:54
开始用了小球的音乐，感觉不错的，发现下面频谱不能对应就用了下面频谱的音乐，这样反正用一个就只能一个 ...

可以的

小辣椒 发表于 2024-5-9 22:01

马黑黑 发表于 2024-5-9 21:55
谢茶。今晚不加班

不加班就喝咖啡{:4_190:}

小辣椒 发表于 2024-5-9 22:02

马黑黑 发表于 2024-5-9 21:55
可以的

不可以也是没有办法了，小辣椒现在做不出漂亮的效果了，只能套用代码了

马黑黑 发表于 2024-5-9 22:45

小辣椒 发表于 2024-5-9 22:02
不可以也是没有办法了，小辣椒现在做不出漂亮的效果了，只能套用代码了

慢慢来不急

马黑黑 发表于 2024-5-9 22:46

小辣椒 发表于 2024-5-9 22:01
不加班就喝咖啡

谢咖啡

红影 发表于 2024-5-9 22:49

这个效果真美啊，灯光效果加频谱加烟花，这么多效果，被亲爱的完美结合了{:4_199:}

庶民 发表于 2024-5-10 08:26

这样的玩就很好的。点赞。

小辣椒 发表于 2024-5-15 17:31

马黑黑 发表于 2024-5-9 22:45
慢慢来不急

急也是没有用了{:4_173:}
页: [1] 2 3
查看完整版本: 动感效果（学习套用黑黑烟花封装效果）