【作业贴】簇拥烈日的花(学习黑师css-doodle粒子纷飞效果)

南无月

:doodle { @grid: 2 / 300px 60px; color: var(--color); bottom:40px; z-index: 100; --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: Indigo; } /* 时间信息 : 左 */ @nth(1) { @place: 25% 80%; :after { content: var(--ttmsg1); } } /* 控制器 */ @nth(2) { @size: var(--size); clip-path: @shape( fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(7t);y: sin(2t) + sin(7t); ); @place: 50% 35%; background: var(--color); animation: rot 6s infinite linear var(--state); } /* 时间信息 : 右 */ @nth(3) { @place: 75% 80%; :after { content: var(--ttmsg2); } } /* 进度条 */ @nth(4) { @place: 50% 80%; @size: 100% 2px; background: #bbb; display: grid; place-items: center start; :before { content: ''; width: var(--prog); height: 100%; background: var(--color); } } @keyframes rot { to { transform: rotate(1turn); } } :doodle { @size: auto 4em; top: 0; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: LightGrey; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: Teal; /* 同步歌词颜色 */ 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%; } } :doodle {@grid: 16 / 1024px 640px;border: 1px solid tan;perspective: 800px;}:container {transform-style: preserve-3d;background: radial-gradient(circle,navy);}@size: @r(3,6)px;border-radius: 50%;@place: @r(660,340)px @r(660,120)px;background: rgba(@m3(@r(255)),@r(.6, .9));transform: rotate(@r(720)deg) translate3d(@r(500)px, @r(300)px, @r(1000)px);animation: fly @r(20,40)s @r(-20,0)s infinite linear var(--state);@keyframes fly { to { transform: rotate(0) translate3d(0, 0, 0); } }

樵歌

100+

南无月

樵歌 发表于 2023-5-16 19:47
100+

南无月

醉美水芙蓉 发表于 2023-5-16 18:11
速度好快！做得漂亮！

谢谢鼓励

南无月

@马黑黑 粒子作业交一份辛苦老师瞧一眼

红影

制作很漂亮。月儿真棒

南无月

红影 发表于 2023-5-16 20:49
制作很漂亮。月儿真棒

影子晚上好

红影

南无月 发表于 2023-5-16 20:50
影子晚上好

所有的操作都是css-doodle制作的，真好，学习了

南无月

红影 发表于 2023-5-16 20:51
所有的操作都是css-doodle制作的，真好，学习了

嗯嗯，是最近练习的内容

马黑黑

这个很活泼

樵歌

南无月 发表于 2023-5-16 20:48

高高手

马黑黑

当觉得有个别粒子太大，希望它能小一点，那样的话，可以调整 perspective 值。我的示例是 800，可以是1000、2000、30000，建议在 1500左右。

perspective设置景深，依据是多方面的，一般也会考虑帖子的高宽尺寸。

红影

南无月 发表于 2023-5-16 20:53
嗯嗯，是最近练习的内容

这个背景很适合粒子纷飞的效果呢

南无月

马黑黑 发表于 2023-5-16 21:16
这个很活泼

有点童趣

南无月

樵歌 发表于 2023-5-16 21:31
高高手

感谢鼓励

马黑黑

南无月 发表于 2023-5-16 22:41
有点童趣

童趣好

南无月

马黑黑 发表于 2023-5-16 21:39
当觉得有个别粒子太大，希望它能小一点，那样的话，可以调整 perspective 值。我的示例是 800，可以是1000 ...

好的，我说怎么有的飞到屏外的样子

南无月

红影 发表于 2023-5-16 21:42
这个背景很适合粒子纷飞的效果呢

蒲公英有点飘的到处都是，类似

马黑黑

南无月 发表于 2023-5-16 22:42
好的，我说怎么有的飞到屏外的样子

Z轴的值，比如 translateZ 或 translate3d(x,y,z)的第三个参数，也会影响例子的大小。Z轴是屏幕前人眼和被观察对象的距离，它的值越大，距离越大，个子越小，反之，距离越大，个子越大