【黑师代码】寂静的夜晚TO:小九（学习套用黑师2024062《蔡文晶 - 江湖》粒子飞舞效...
本帖最后由 南无月 于 2024-6-26 22:01 编辑 <br /><br /><style>#tz { left: 50%; transform: translateX(calc(-50% - 81px)); width: 1700px; height: 900px; overflow: hidden; background: lightblue url('https://pic.imgdb.cn/item/66797ecfd9c307b7e9961e8a.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
#tz:fullscreen li-zi { offset-path: path('M700 900 Q-400 450,960 -20'); }
li-zi { position: absolute; top: 0; width: 36px; height: 36px; border-radius: 50%; background: olive; offset-path: path('M600 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 20s cubic-bezier(0,0.36,0,0.14) infinite var(--state); }
li-zi:hover { filter: hue-rotate(180deg) drop-shadow(-100px -160px 0 lightgreen); }
#player { position: absolute; right: 39%; bottom: 31%;mix-blend-mode: screen; width: 160px; height: 160px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: brightness(1.2);filter: hue-rotate(180deg) drop-shadow(0 0 -40px cyan); }
@keyframes fly { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1310316559" autoplay loop></audio>
<img id="player" alt="" title="播放" src="https://pic.imgdb.cn/item/644539570d2dde57770c241e.gif" />
</div>
<script>
new Array(total = 60).fill(0).map((i,k) => {
i = document.createElement('li-zi');
i.style.cssText += `
left: ${600 / total * k + 20}px;
background: url('https://pic.imgdb.cn/item/6587b11ac458853aefbbd724.png') no-repeat center/cover;
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: transparent;',
});
</script> @小九 你的视频非常漂亮，很是喜欢。。
今天跟学的一个新效果送给你。。
一起开心呀。。{:4_187:} @马黑黑 白老师来瞧一眼交一份速成作业。。{:4_170:} left: 50%; transform: translateX(calc(-50% - 81px));
用了才知道，这一句是真的好用。。改个数据就可以了。。 改了一下管速度的数据，跟子弹一样喷射出来。。{:4_170:} 好奇妙的背景，小播也好漂亮，最奇妙的是月儿把粒子换成了图片，带来这么奇妙的效果呢{:4_199:} 小播最好用百分比来定位，这样全屏的时候就不会移位了呢{:4_204:} 那手掌那么大，好像要抓住那笑美女似的。{:4_173:}
看着手掌一直张开着，还真是黑黑最喜欢说的那句：手掌辛苦了{:4_189:} 南无月 发表于 2024-6-24 22:33
left: 50%; transform: translateX(calc(-50% - 81px));
用了才知道，这一句是真的好用。。改个数据就可以 ...
不用计算，记住水平偏移量就行{:4_170:} 南无月 发表于 2024-6-24 22:41
改了一下管速度的数据，跟子弹一样喷射出来。。
这就是创意！
@小九 收礼开森！ 五彩缤纷的画面怎一个美字了得！{:5_116:} 那播放器最漂亮了。粒子变花儿，里面还藏小间蝶不少。{:4_189:} 真漂亮！赞！{:4_187:} 欣赏月月的精彩制作，这个教程还没有看过的，先送上掌声和鲜花。。。。{:4_186:}{:4_204:} 然后去看看黑黑的教程分享，月月总是第一个完成作业的，特棒！ 马黑黑 发表于 2024-6-24 23:24
不用计算，记住水平偏移量就行
已经大大体会到这句的好处。。
特别是贴子宽度变化之后，
常用的发贴环境都不用做任何更改。。
每个细节都在越来越先进。{:4_173:} 马黑黑 发表于 2024-6-24 23:25
这就是创意！
@小九 收礼开森！
{:4_170:}
刚看到老师发的教程，更加直观的看到效果。。
这个太厉害 了。。 南无月 发表于 2024-6-25 17:55
已经大大体会到这句的好处。。
特别是贴子宽度变化之后，
常用的发贴环境都不用做任何更改。。
有时候心算跟不上{:4_170:} 南无月 发表于 2024-6-25 17:56
刚看到老师发的教程，更加直观的看到效果。。
这个太厉害 了。。
写这个小东东还不容易，花了好多喝花酒的时间 马黑黑 发表于 2024-6-25 17:56
有时候心算跟不上
你又没有这方面的体验，怎么猜得这么准。
是速算跟不上。
我自己网站老是831，记得你说过851的，记得呢就改过来，不记得呢，就还是有点偏。。。