css-doodle：逐字显示演示

马黑黑

思路：每一个单元格装载一个字，让它们依次排列，排列算法要考虑到诗行。各单元格开始时全透明，通过关键帧动画逐一显现，涉及到的算法在 css-doodle 里是简单的。以下是代码，我们给 :doodle{} 选择器嵌套了一个 css-doodle 背景。逐字显示的代码在 16 到 26 行之间：

<css-doodle grid="6x4" click-to-update>
	:doodle {
		@size: 600px 400px;
		background: @doodle(
			@grid: 1 / 100%;
			background: gray;
			clip-path: @shape(
				points: 1000;
				scale: .8;
				move: .5 .64;
				x: cos(t^t) + cos(1.8^t);
				y: sin(t) + sin(2.305t)*sin(t);
			);
		);
	}
	@size: 40px;
	@place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);
	font: normal 30px / 40px sans-serif;
	color: rgb(@m3(@r(255)));
	text-shadow: 1px 1px 2px #000;
	opacity: 0;
	:before {
		content: @pn([泠泠七弦上，静听松风寒。古调虽自爱，今人多不弹。]);
	}
	animation: show .3s calc((@i - 1) * .3s) linear forwards;
	@keyframes show { to { opacity: 1; } }
</css-doodle>

运行代码

红影

这个脸制图都是代码完成的，文字也能按需要逐字显示，这个厉害了

红影

clip-path: @shape(……） 这个一直都看不懂，包括上一个帖子里也是

红影

红影 发表于 2023-5-15 13:44
clip-path: @shape(……） 这个一直都看不懂，包括上一个帖子里也是

我找到了，这个是入门（七）里的内容，当时就学的不够好，所以碰到具体的例子就迷糊了

樵歌

好好好！以后咱凑个七绝啥的就用这个呗。
另外，加个标题（比如：七绝，题花潮论坛）加哪里？若加点音乐，那几行又加在哪儿？

马黑黑

醉美水芙蓉 发表于 2023-5-15 17:05
记得以前教过逐字显示，都还给老师了！接着学吧！

以前的是通过JS实现，能实现更为复杂的效果；这个是基于css-doodle的，处理文本不是它的长项

南无月

图好看，字也好看

马黑黑

南无月 发表于 2023-5-15 20:38
图好看，字也好看

还行

南无月

马黑黑 发表于 2023-5-15 20:46
还行

跟了一个。

马黑黑

南无月 发表于 2023-5-15 21:03
跟了一个。

效果如何

梦缘

很好的分享，感谢！

马黑黑

梦缘 发表于 2023-5-15 21:54
很好的分享，感谢！

南无月

马黑黑 发表于 2023-5-15 21:30
效果如何

十分好看，有山有水有诗

马黑黑

南无月 发表于 2023-5-15 22:23
十分好看，有山有水有诗

俗称山水诗

南无月

马黑黑 发表于 2023-5-15 23:05
俗称山水诗

也叫田园诗

马黑黑

南无月 发表于 2023-5-16 17:47
也叫田园诗

好像有这个说法

南无月

马黑黑 发表于 2023-5-16 18:18
好像有这个说法

这个是普通的说法

马黑黑

南无月 发表于 2023-5-16 20:51
这个是普通的说法

额

南无月

马黑黑 发表于 2023-5-16 21:20
额

额头，头大