橘子洲头（学习黑师汉字逐渐显示效果）

南无月

:doodle {@size: 100px; cursor: pointer; left:150px; top: 50px; z-index: 4; clip-path: @shape(fill: evenodd;points: 600;scale: .13;x: 6 * cos(t) + cos(12t);y: 6 * sin(t) - sin(12t););background: url('https://pic2.imgdb.cn/item/6464c4ed0d2dde5777ca602a.gif') no-repeat center / cover; pointer-events: auto; animation: rot 6s infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } }:doodle {@size: 240px 300px;left: 120px;top: 200px;cursor: pointer;z-index: 3;}@size: 50px;@place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);font: normal 30px / 40px sans-serif;color:yellow;text-shadow: 1px 1px 2px #000;opacity: 0;:before {content: @pn([独立寒秋， 湘江北去， 橘子洲头。 看万山红遍，层林尽染； 漫江碧透， 百舸争流……]);}animation: show .3s calc((@i - 1) * .3s) linear forwards var(--state);@keyframes show { to { opacity: 1; } }:doodle { @size: 1024px 640px; perspective: 300px; }:container { transform-style: preserve-3d; }background: @m(@r(140, 100), radial-gradient(@p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 15%, transparent 50%) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);@size: 30%;@place-cell: center;border-radius: 50%;animation: scale-up 15s calc(@i * -.6s) linear infinite var(--state);@keyframes scale-up {0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }10% { opacity: 1; }95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); }100% { opacity: 0; transform: translate3d(0, 0, 1vmin); }}

南无月

@马黑黑 知道问题在JS部分的最后一句，还有播放器Z值的问题，

南无月

毛主席来了，说话要算数

红影

这个做得漂亮。文字和粒子都出来了，还有漂亮的播放器按钮。月儿真棒

红影

这个文字使用单一色的好，粒子还是多钟颜色。文字点击可以重新加载，点击暂停可以让所有内推停止

南无月

红影 发表于 2023-5-17 20:51
这个做得漂亮。文字和粒子都出来了，还有漂亮的播放器按钮。月儿真棒

影子晚上好，好不容易整出来

南无月

醉美水芙蓉 发表于 2023-5-17 20:54
月儿学得快！做得漂亮！

水芙蓉晚上好，试着练习一下写得作业

南无月

红影 发表于 2023-5-17 20:58
这个文字使用单一色的好，粒子还是多钟颜色。文字点击可以重新加载，点击暂停可以让所有内推停止

差点没整出来，请教了老师

樵歌

女冠军来了

红影

南无月 发表于 2023-5-17 21:01
影子晚上好，好不容易整出来

那个空格占位好，让长长短短的词句用了所有个格子。

樵歌

超级学霸！满满的正量！红公主

红影

南无月 发表于 2023-5-17 21:02
差点没整出来，请教了老师

很不错的，做的很棒

马黑黑

南无月 发表于 2023-5-17 20:48
@马黑黑 知道问题在JS部分的最后一句，还有播放器Z值的问题，

第一，废码要去掉；第二，布局讲究尺寸，不是所有的 css-doodle 都弄成和帖子一样大小；第三，由于粒子的css-doodle是全屏的，层级关系要调整，或可以按顺序排列：粒子在前面，按钮、文本在后面，总之，各层之间有重合的，需要适当提升埋在下层的（除非不需要）。

梦缘

好制作，欣赏点赞！

南无月

樵歌 发表于 2023-5-17 21:46
女冠军来了

感谢鼓励

南无月

红影 发表于 2023-5-17 21:51
那个空格占位好，让长长短短的词句用了所有个格子。

我取了个巧，只多一个字用空格可以解决。更多的空格处理没有研究

南无月

樵歌 发表于 2023-5-17 21:51
超级学霸！满满的正量！红公主

经典红歌，能量满满

南无月

红影 发表于 2023-5-17 21:51
很不错的，做的很棒

练习一下巩固知识点，哈哈

南无月

马黑黑 发表于 2023-5-17 22:05
第一，废码要去掉；第二，布局讲究尺寸，不是所有的 css-doodle 都弄成和帖子一样大小；第三，由于粒子的 ...

好的，播放按钮也试过清理废码，还是不成。看了老师的对比一下知道了，果然一团乱麻。