css-doodle：使用offset-path路径

马黑黑

以下代码极其简单：仅一个css-doodle单元格，鲸鱼形状，用 :after 做眼睛。鲸鱼做曲线运动，实现的核心在 offset-path 和 offset-distance 属性的相关设置，是这两个属性令鲸鱼做不规则运动：

<css-doodle grid="1" click-to-update>
	:doodle { @size: 600px 200px; }
	@size: 100px;
	@shape: whale;
	background: rgb(50,100,200);
	cursor: pointer;
	:after {
		content: '';
		position: absolute;
		right: 10px;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: radial-gradient(black,snow);
	}
	offset-path: path('M80 80 Q 100 10, 145 80 T 500 60');
	animation: move 6s forwards;
	@keyframes move { to { offset-distance: 100%; } }
</css-doodle>

运行代码

点击鲸鱼，它会从头开始执行关键帧动画。

小辣椒

太神奇了

红影

给鲸鱼画了个眼睛，好看。offset-path怎么画的又忘得差不多了，看到Q是二次贝塞尔曲线吧

马黑黑

小辣椒 发表于 2023-5-19 22:14
太神奇了

你若能懂得原理，就没什么神奇的

马黑黑

红影 发表于 2023-5-19 22:40
给鲸鱼画了个眼睛，好看。offset-path怎么画的又忘得差不多了，看到Q是二次贝塞尔曲线吧

西瓜芝麻问题又来了

红影

马黑黑 发表于 2023-5-22 11:52
西瓜芝麻问题又来了

然后，我顺势赶紧去复习了一下啊

马黑黑

红影 发表于 2023-5-22 19:02
然后，我顺势赶紧去复习了一下啊

下回还会忘记

红影

马黑黑 发表于 2023-5-22 20:23
下回还会忘记

忘记了再复习呗

马黑黑

红影 发表于 2023-5-22 21:24
忘记了再复习呗

反反复复，迷迷糊糊，与仙一模一样

红影

马黑黑 发表于 2023-5-22 23:04
反反复复，迷迷糊糊，与仙一模一样

我那个风筝就是用了你这个里面的路径方式。
多忘几次还能成仙，真不错啊

马黑黑

红影 发表于 2023-5-23 10:26
我那个风筝就是用了你这个里面的路径方式。
多忘几次还能成仙，真不错啊

没错

红影

马黑黑 发表于 2023-5-23 12:08
没错

那我赶快祈求成仙吧

马黑黑

红影 发表于 2023-5-23 17:10
那我赶快祈求成仙吧

必须的

红影

马黑黑 发表于 2023-5-23 19:22
必须的

学了忘忘了再学

马黑黑

红影 发表于 2023-5-23 20:03
学了忘忘了再学

反反复复乐此不疲

红影

马黑黑 发表于 2023-5-23 20:46
反反复复乐此不疲

刚才又去试个鱼的帖子，争取复习过后记住路径的相关知识

马黑黑

红影 发表于 2023-5-23 22:22
刚才又去试个鱼的帖子，争取复习过后记住路径的相关知识

路径难度有些大，要多复习才能真正掌握。我再我的网站再整理一下 svg path

红影

马黑黑 发表于 2023-5-23 23:36
路径难度有些大，要多复习才能真正掌握。我再我的网站再整理一下 svg path

嗯嗯，我去看看。。。

马黑黑

红影 发表于 2023-5-24 16:27
嗯嗯，我去看看。。。

谢谢关注。我会慢慢把 d 属性弄全

红影

马黑黑 发表于 2023-5-24 19:16
谢谢关注。我会慢慢把 d 属性弄全

跑去看了看，也没找到啊