小辣椒 发表于 2024-4-26 16:36

五星红旗 （套用学习黑黑 Blissful Mind 粒子效果）


<style>
#papa { margin: 150px 0 20px calc(50% - 921px); width: 1680px; height: 894px; background: url('https://wj.zp68.com/lxx/yunhua/2024/04/26/bj.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px rgba(0,0,0,.6); display: grid; place-items: center; position: relative; }
#player { position: absolute; left: 680px; top:230px; width: 250px; height: 250px; cursor: pointer; z-index: 10; }
.vid { position: absolute;left: 615px;top:190px; width: 400px; height: 350px; object-fit: cover; mix-blend-mode: screen; }
#dt4{ position: absolute; width: 100px; height: 120px; top: 70px; left: 1380px; }
#dt5{ position: absolute; width: 499px; height: 356px; top: 75px; left: 1205px; }
</style>

<div id="papa">
<img id="dt4" src="https://wj.zp68.com/lxx/yunhua/2024/04/26/xh1.gif" alt="" />
<img id="dt5" src="https://wj.zp68.com/lxx/yunhua/2024/04/26/yh2.jpg" alt="" />
        <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2024/04/26/wxhq.mp3" autoplay loop></audio>
        <video class="vid" src="https://shanlr.s3-us-east-1-accelerate.ossfiles.com/mp4/%E7%90%83%E4%BD%93.mp4" loop muted></video>
        <div id="player" title="播放/暂停"></div>
</div>

<script>

var vids = document.querySelectorAll('.vid');
var sc = document.createElement('script');
sc.charset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js/dot-lz.js';
document.body.appendChild(sc);

var lz = {papa: '#papa', total: 60, r: 5, max_r: 15, step: 0.5, color: 'rgba(119, 179, 126,.7)', opacity: .9, move: false};


var mState = () => {
        vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
        lz.move = !aud.paused;
};

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

player.onclick = () => aud.paused ? aud.play() : aud.pause();

</script>

小辣椒 发表于 2024-4-26 16:37

@马黑黑

黑黑~~套用一个玩玩，谢谢黑黑教程分享

起个网名好难 发表于 2024-4-26 16:46

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

庶民 发表于 2024-4-26 17:01

太好了，大气恢宏。

亦是金 发表于 2024-4-26 17:55

问好小辣椒！{:4_187:}帖子大气恢宏！{:4_199:}

小辣椒 发表于 2024-4-26 19:55

起个网名好难 发表于 2024-4-26 16:46


问好难难，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-4-26 19:56

庶民 发表于 2024-4-26 17:01
太好了，大气恢宏。

庶民晚上好，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-4-26 19:56

亦是金 发表于 2024-4-26 17:55
问好小辣椒！帖子大气恢宏！

前面晚上好，谢谢欣赏{:4_187:}

梦油 发表于 2024-4-26 20:36

小辣椒朋友以最精美的制作，为“五·一”国际劳动节谱写了劳动者的颂歌。

醉美水芙蓉 发表于 2024-4-26 20:47

南无月 发表于 2024-4-26 21:15

小辣椒这贴子效果太壮观了。大气磅礴，威武雄壮。。
听着就让人振奋。。

南无月 发表于 2024-4-26 21:17

中间转动的球体，呼之欲出啊，太立体了。。。
黑背景衬托之下，好美啊。。{:4_199:}
大小调得很合适，飞出来的小圆形跟粒子大小一致。。更加协调。。

红影 发表于 2024-4-26 21:48

亲爱的这个帖子真壮观，在帖子中感受对祖国的歌颂。给亲爱的点赞{:4_199:}

朵拉 发表于 2024-4-27 21:07

好漂亮的效果，欣赏咯~~{:4_178:}

马黑黑 发表于 2024-4-27 22:40

{:4_199:}

樵歌 发表于 2024-4-28 12:35

精典的爱国题材，奋起吧，我的祖国。{:4_374:}

樵歌 发表于 2024-4-28 12:37

做这帖子的人是祖国的女儿，有一颗热爱家国的红心{:4_185:}
页: [1]
查看完整版本: 五星红旗 （套用学习黑黑 Blissful Mind 粒子效果）