猜猜这个是不是在转

马黑黑

马黑黑

代码：

<svg width="300" height="300" viewBox="0 0 300 300">
	<circle cx="150" cy="150" r="0" fill="none" stroke="purple" stroke-width="4" stroke-dasharray="4 10">
		<animate id="a1" attributeName="r" from="0" to="283" dur="8s" repeatCount="indefinite" />
	</circle>
	<circle cx="150" cy="150" r="0" fill="none" stroke="olive" stroke-width="4" stroke-dasharray="4 10">
		<animate id="a2" attributeName="r" from="0" to="283" dur="8s" repeatCount="indefinite" begin="a1.begin+4s" />
	</circle>
</svg>

马黑黑

动画中 to="283" 算式里，283 的得来依据勾股定理。

红影

这个这么点代码就能有这么奇妙的效果啊

绿叶清舟

在长大

梦油

是在转啊。

红影

想半天也没想明白，它的原理是画虚线，半径逐渐变大，但怎么可能超出150呢，所以剩下的都画到视窗外去了？

樵歌

巧妙！应当是粒子不断跳出来圈变大了。

马黑黑

樵歌 发表于 2024-9-12 21:27
巧妙！应当是粒子不断跳出来圈变大了。

是变大

马黑黑

红影 发表于 2024-9-12 20:26
这个这么点代码就能有这么奇妙的效果啊

这是两个圆，不填充，给线条着色，间隔10像素画一个4像素的线段

马黑黑

醉美水芙蓉 发表于 2024-9-12 21:14
老师是在画月饼吗？请黑黑老师吃月饼！

谢谢，先留着

马黑黑

红影 发表于 2024-9-12 20:56
想半天也没想明白，它的原理是画虚线，半径逐渐变大，但怎么可能超出150呢，所以剩下的都画到视窗外去了？{ ...

就是消失了，然后重头再来

马黑黑

绿叶清舟 发表于 2024-9-12 20:27
在长大

完全正确

马黑黑

梦油 发表于 2024-9-12 20:30
是在转啊。

实际上不转。这是两个圆，交替出现并不断扩张，圆周的先是线段，随着不断长大，线段不断增加

花飞飞

我的天，这虚线真好看

马黑黑

花飞飞 发表于 2024-9-12 22:48
我的天，这虚线真好看

可以一看吧

起个网名好难

马黑黑 发表于 2024-9-12 20:26
动画中 to="283" 算式里，283 的得来依据勾股定理。

2√2
或许 300 好些，（下一个在最大内切圆时出现）

起个网名好难

马黑黑

起个网名好难 发表于 2024-9-13 06:09
2√2
或许 300 好些，（下一个在最大内切圆时出现）

不错的主意