论坛 › 欢乐水吧 › 纯音欣赏---紫禁花园 （学习套用黑黑江湖 粒子效果）

小辣椒 发表于 2024-6-25 17:32

纯音欣赏---紫禁花园 （学习套用黑黑江湖 粒子效果）

<style>
#tz { left: 50%; transform: translateX(calc(-50% - 81px));top: 130px;width: 1200px; height: 899px; overflow: hidden; background: lightblue url('https://wj1.zp68.com:812/lxx/yunhua/2023/08/22/000.gif') no-repeat center/cover; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
#tz:fullscreen li-zi { offset-path: path('M200 900 Q-400 450,960 -20'); }
li-zi { position: absolute; top: 0; width: 30px; height: 1px; border-radius: 50%; background: olive; offset-path: path('M100 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 20s cubic-bezier(0.17,0.86,0.73,0.14) infinite var(--state); }
li-zi:hover { filter: hue-rotate(180deg) drop-shadow(-100px -160px 0 lightgreen); }
#player { position: absolute; right: 180px; bottom: 80px; width: 120px; height: 120px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: brightness(1.2); }
@keyframes fly { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }

#dt1{ position: absolute; width:800px; height: 600px; top: 220px; left: -54px; }
#dt2{ position: absolute; width: 600px; height: 429px; top: 550px; left: -10px; }

</style>

<div id="tz">

<img id="dt1" src="https://file.uhsea.com/2406/51ee14713161c3aa8a720bc6b5a729b5A0.gif " alt="" />
<img id="dt2" src="https://file.uhsea.com/2406/f8b5f7de6af29a6587b1428b3dba8acbQH.png" alt="" />

        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/d5/c0/ac/1a864de2991df424892a878bcb04fc78/audio.mp3" autoplay loop></audio>
        <img id="player" alt="" title="播放" src="https://xlaj.cn/assets/file/zp/20240106162128.svg" />
</div>

<script>
//粒子
new Array(total = 20).fill(0).map((i,k) => {
        i = document.createElement('li-zi');
        i.style.cssText += `
                left: ${600 / total * k + 20}px;
                background-image: linear-gradient(lightgreen, #${Math.random().toString(16).substring(2,8)});
                animation-delay: -${Math.random() * 20}s;
                --shadow: #${Math.random().toString(16).substring(2,8)};
        `;
        tz.prepend(i);
});
//联动函数
var mState = () => {
        tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
//全屏
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
        papa: '#tz',
        css: 'bottom: 20px; left: 50%; transform: translateX(-50%); --color: white; --fsBg: green;',
});
</script>
<br><br><br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2024-6-25 17:35

@马黑黑

黑黑~纯套用，就改了粒子效果的大小，改了路径的起始点，其他统统没有改

小辣椒 发表于 2024-6-25 17:36

晚上我不能上来，匆匆做个帖，居中的代码没有搞懂，就加了一个上去，也是不知道是不是可以这样加，反正效果出来了，我就这样算了

马黑黑 发表于 2024-6-25 17:53

小辣椒 发表于 2024-6-25 17:36
晚上我不能上来，匆匆做个帖，居中的代码没有搞懂，就加了一个上去，也是不知道是不是可以这样加，反正效果 ...
帖子水平方向居中是这两句代码：

left: 50%; transform: translateX(calc(-50% - 90px));

红色部分是论坛帖子偏移量。花潮的而是建军节 81px ，不是 90！

原理：相对定位的元素，先令其 left 为 50% （这是基于页面的设置），然后再用转换属性 transform 回移 50%（这是基于元素的设置），没有偏移的情况下元素就会在页面中水平居中，若有偏移量，则需要减去或加上（看它偏左偏右而定）该偏移量。

论坛发的帖子，和头像栏共用表格，整体偏移量通过火星科学测算是 81px ，记住，是建军节（想一想 @樵歌 当过大头兵）！

马黑黑 发表于 2024-6-25 17:54

小辣椒 发表于 2024-6-25 17:35
@马黑黑

黑黑~纯套用，就改了粒子效果的大小，改了路径的起始点，其他统统没有改

你这是发射了好多小捣蛋——哦不，是小导弹——，你这是要袭击谁的心呢{:4_170:}

梦油 发表于 2024-6-25 18:25

图中的倒影真美！

樵歌 发表于 2024-6-25 19:45

我发现有几支箭失射中小鸟了，但小鸟已经炼成金刚不坏之身，射中一点事儿也木有。{:4_170:}

樵歌 发表于 2024-6-25 19:47

那小狗还穿着着马甲，天热，快给脱下来吧{:4_189:}

樵歌 发表于 2024-6-25 19:47

马黑黑 发表于 2024-6-25 17:53
帖子水平方向居中是这两句代码：

left: 50%; transform: translateX(calc(-50% - 90px));


我乍趟枪了{:4_198:}

小辣椒 发表于 2024-6-25 20:18

马黑黑 发表于 2024-6-25 17:53
帖子水平方向居中是这两句代码：

left: 50%; transform: translateX(calc(-50% - 90px));

就记挂这个居中的问题，看见你发的代码是{ left: 50%; transform: translateX(calc(-50% - 1px));以前我晓得是81的，主要是这个高度代码你换了，我不懂这个就自己加了个代码进去
{:4_205:}作业完成一个是一个

小辣椒 发表于 2024-6-25 20:21

马黑黑 发表于 2024-6-25 17:53
帖子水平方向居中是这两句代码：

left: 50%; transform: translateX(calc(-50% - 90px));

谢谢黑黑指导，现在也是越来越晕的，做个帖像打仗。。。。{:4_198:}手机回帖累，下的

小辣椒 发表于 2024-6-25 20:26

梦油 发表于 2024-6-25 18:25
图中的倒影真美！

谢谢梦油欣赏，晚上好{:4_187:}

小辣椒 发表于 2024-6-25 20:28

樵歌 发表于 2024-6-25 19:45
我发现有几支箭失射中小鸟了，但小鸟已经炼成金刚不坏之身，射中一点事儿也木有。

樵哥哥晚上&#128076;&#127995;，上来瞄一眼，就下

马黑黑 发表于 2024-6-25 21:01

小辣椒 发表于 2024-6-25 20:21
谢谢黑黑指导，现在也是越来越晕的，做个帖像打仗。。。。手机回帖累，下的

手机不合适玩论坛

马黑黑 发表于 2024-6-25 21:01

小辣椒 发表于 2024-6-25 20:18
就记挂这个居中的问题，看见你发的代码是{ left: 50%; transform: translateX(calc(-50% - 1px));以前 ...

{:4_190:}

马黑黑 发表于 2024-6-25 21:02

樵歌 发表于 2024-6-25 19:47
我乍趟枪了

81嘛

红影 发表于 2024-6-25 21:20

漂亮的动态效果，粒子的调整也好漂亮。欣赏亲爱的好帖{:4_199:}

执著 发表于 2024-6-25 22:18

欣赏老师精美的音画。我只知道看上去很漂亮{:4_204:}

樵歌 发表于 2024-6-26 08:14

小辣椒 发表于 2024-6-25 20:28
樵哥哥晚上&#128076;&#127995;，上来瞄一眼，就下

{:4_203:}

樵歌 发表于 2024-6-26 08:19

马黑黑 发表于 2024-6-25 21:02
81嘛

{:4_203:}

查看完整版本: 纯音欣赏---紫禁花园 （学习套用黑黑江湖 粒子效果）