许愿树（学习黑师《信仰》播放器及粒子效果【修正版】）

南无月

:doodle {@size: auto 4em;position: absolute;bottom: 10px;--geci: 'css-doodle player';--motion: cover2;--tt: 1s;}display: grid;place-items: center start;:before, :after {content: var(--geci);color: AliceBlue;font: bold 2em sans-serif;text-shadow: 1px 1px 2px #000;white-space: pre;}:after {position: absolute;width: 0;color:LightSkyBlue;overflow: hidden;animation: var(--motion) var(--tt) linear forwards var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }

南无月

@马黑黑 粒子数量由160调到120..而且不同的电脑看粒子飞的速度并不相同。。

南无月

@鱼儿 来瞧瞧，这个贴子的名子是根据《玉骨遥》那棵树起的。。有没有点点梦幻的感觉

红影

月儿厉害，做雨丝效果就能找到下雨的视频，现在做粒子泡泡，就用了泡泡视频相配。
这个粒子也调整了位置，全部放到右侧。还加了歌词同步。欣赏月儿好帖

红影

小蝴蝶的播放器按钮的暂停也是那个唱歌的猫的暂停效果吧，很漂亮。
月儿总能将各帖里的效果完美结合，很赞

马黑黑

南无月 发表于 2023-7-14 09:41
@马黑黑 粒子数量由160调到120..而且不同的电脑看粒子飞的速度并不相同。。

显示刷新率影响粒子速度。

粒子过多，浏览器负担会加重。

鱼儿

南无月 发表于 2023-7-14 09:42
@鱼儿 来瞧瞧，这个贴子的名子是根据《玉骨遥》那棵树起的。。有没有点点梦幻的感觉

我要许愿《热烈》大卖！

南无月

红影 发表于 2023-7-14 10:24
月儿厉害，做雨丝效果就能找到下雨的视频，现在做粒子泡泡，就用了泡泡视频相配。
这个粒子也调整了位置， ...

影子真好啊，我找到这个视频的时候就觉得太喜欢了
粒子位置是老师帮整的，原来没这么刚好。。所以是修正版

南无月

红影 发表于 2023-7-14 10:26
小蝴蝶的播放器按钮的暂停也是那个唱歌的猫的暂停效果吧，很漂亮。
月儿总能将各帖里的效果完美结合，很赞 ...

就是看到这个小播比较新颖才想着跟做，没想到一动手都是问题。。

南无月

马黑黑 发表于 2023-7-14 12:54
显示刷新率影响粒子速度。

粒子过多，浏览器负担会加重。

嗯嗯，粒子飞得快慢还是比较明显的，原来是刷新率的问题。
调少点，感觉没那么拥挤

南无月

鱼儿 发表于 2023-7-14 13:31
我要许愿《热烈》大卖！

我要帮鱼儿许愿，7.28热烈大卖！！

南无月

鱼儿 发表于 2023-7-14 13:31
我要许愿《热烈》大卖！

你家偶像近期出的都是电影哈。。。大屏幕进军的节奏。。

红影

南无月 发表于 2023-7-14 18:05
影子真好啊，我找到这个视频的时候就觉得太喜欢了
粒子位置是老师帮整的，原来没这么刚好。。 ...

不管怎么说，这个帖子很完美呀，月儿真棒。

红影

南无月 发表于 2023-7-14 18:06
就是看到这个小播比较新颖才想着跟做，没想到一动手都是问题。。

没感觉有问题啊。很好的

千羽

很亮眼的制作，好美啊，月儿掌控代码的能力真让人佩服呢

千羽

给棒棒的月儿点个大赞哈

马黑黑

南无月 发表于 2023-7-14 18:08
嗯嗯，粒子飞得快慢还是比较明显的，原来是刷新率的问题。
调少点，感觉没那么拥挤

现在粒子的实现机制，是往当前 DOM 里直接塞元素，如果元素的运动需要JS直接驱动，那么，粒子多的话，系统资源会吃紧，但用 @keyframes 关键帧动画驱动粒子的话，粒子多一些也无所谓。

南无月

红影 发表于 2023-7-14 20:09
不管怎么说，这个帖子很完美呀，月儿真棒。

好哒，影子周末快乐哈

南无月

红影 发表于 2023-7-14 20:10
没感觉有问题啊。很好的

嗯哪，现在没问题了

南无月

千羽 发表于 2023-7-14 21:45
很亮眼的制作，好美啊，月儿掌控代码的能力真让人佩服呢

这个图是乱融的作业，调调越整越暗