css-doodle: 文字逐个落下示例

马黑黑

代码：

<css-doodle grid="7x1" click-to-update>
	:doodle { @size: 400px; }
	@size: 40px;
	@shape: circle;
	background: gray;
	:after { content: @pn([天高几许问真龙]); }
	animation: fall 1s calc((@i - 1) * 1s) linear forwards;
	@keyframes fall {
		from { transform: translateY(0); }
		to { transform: translateY(360px); }
	}
</css-doodle>

运行代码

代码分析：

重点在 animation 属性的赋值。每个单元格都是一秒的运行时长，延时算法根据各自的序号减 1 乘以 1 得到，linear 是匀速运行，forwards 表示保持最后一帧的状态。

小提示：单击运行框，一切重来。

南无月

厉害，就是这个效果

马黑黑

顺便提一下，论坛已经上传了 css-doodle 资源文档，地址为：

https://www.huachaowang.com/css-doodle.min.js

在论坛中，引用资源文档的方法如下（JS代码部分）：

let script = document.createElement('script');
script.src = 'https://www.huachaowang.com/css-doodle.min.js';
document.head.appendChild(script);

马黑黑

南无月 发表于 2023-5-14 20:55
厉害，就是这个效果

所以叫你研究一下，你全网跑一遍就可以了

马黑黑

醉美水芙蓉 发表于 2023-5-14 21:06
欣赏黑黑老师教程分享！

晚上嚎

红影

来学习了，虽然不是很懂。没看出来为什么是逐个落下的

亦是金

马黑黑 发表于 2023-5-14 20:55
顺便提一下，论坛已经上传了 css-doodle 资源文档，地址为：

https://www.huachaowang.com/css-doodle.m ...

谢谢马黑黑老师，辛苦了！收藏了，更换了。

马黑黑

亦是金 发表于 2023-5-14 21:44
谢谢马黑黑老师，辛苦了！收藏了，更换了。

辛苦

马黑黑

红影 发表于 2023-5-14 21:30
来学习了，虽然不是很懂。没看出来为什么是逐个落下的

看解释

红影

马黑黑 发表于 2023-5-14 22:01
看解释

嗯嗯，看到了。
“延时算法根据各自的序号减 1 乘以 1 得到”

马黑黑

红影 发表于 2023-5-14 22:36
嗯嗯，看到了。
“延时算法根据各自的序号减 1 乘以 1 得到”

对

红影

马黑黑 发表于 2023-5-14 22:38
对

嗯嗯，学习了

马黑黑

红影 发表于 2023-5-14 22:44
嗯嗯，学习了

学以致用最好

樵歌

狠好！请问：光落字不要那圈圈成不？多行字肿么办？如何调整字的颜色？

樵歌

反正我也是菜鸟，就多问点。

马黑黑

樵歌 发表于 2023-5-15 08:40
狠好！请问：光落字不要那圈圈成不？多行字肿么办？如何调整字的颜色？

文本颜色用 color 属性；
文字不要背景，可将 background 属性去掉、border-radius 属性也去掉。
多行逐字落下在 css-doodle 里操作起来比较繁琐、

我这个只是一个范例，主要演示文本逐字下落的原理，其他更多功能没有演示。

马黑黑

樵歌 发表于 2023-5-15 08:41
反正我也是菜鸟，就多问点。

红影

马黑黑 发表于 2023-5-14 23:12
学以致用最好

看到今天弄个诗句，不是下落的，而是逐渐显示颜色的。

樵歌

马黑黑 发表于 2023-5-15 11:55
文本颜色用 color 属性；
文字不要背景，可将 background 属性去掉、border-radius 属性也去掉。
多行 ...

谢谢，反正跟我说了也是白说。以后也是抄个作业也得请人帮忙的