马黑黑 发表于 2024-9-12 20:13

猜猜这个是不是在转

本帖最后由 马黑黑 于 2024-9-12 20:22 编辑 <br /><br /><div style="margin: 60px; text-align: center;">
        <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>
</div>

马黑黑 发表于 2024-9-12 20:14

本帖最后由 马黑黑 于 2024-9-12 20:23 编辑 <br /><br /><h2>代码：</h2>
<div class="hE"><pre>
&lt;svg width="300" height="300" viewBox="0 0 300 300"&gt;
        &lt;circle cx="150" cy="150" r="0" fill="none" stroke="purple" stroke-width="4" stroke-dasharray="4 10"&gt;
                &lt;animate id="a1" attributeName="r" from="0" to="283" dur="8s" repeatCount="indefinite" /&gt;
        &lt;/circle&gt;
        &lt;circle cx="150" cy="150" r="0" fill="none" stroke="olive" stroke-width="4" stroke-dasharray="4 10"&gt;
                &lt;animate id="a2" attributeName="r" from="0" to="283" dur="8s" repeatCount="indefinite" begin="a1.begin+4s" /&gt;
        &lt;/circle&gt;
&lt;/svg&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-9-12 20:26

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

红影 发表于 2024-9-12 20:26

这个这么点代码就能有这么奇妙的效果啊{:4_187:}

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

在长大

梦油 发表于 2024-9-12 20:30

是在转啊。

红影 发表于 2024-9-12 20:56

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

醉美水芙蓉 发表于 2024-9-12 21:14

樵歌 发表于 2024-9-12 21:27

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

马黑黑 发表于 2024-9-12 22:06

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

是变大

马黑黑 发表于 2024-9-12 22:08

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

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

马黑黑 发表于 2024-9-12 22:08

醉美水芙蓉 发表于 2024-9-12 21:14
老师是在画月饼吗？请黑黑老师吃月饼！
谢谢，先留着{:4_170:}

马黑黑 发表于 2024-9-12 22:08

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

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

马黑黑 发表于 2024-9-12 22:09

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

完全正确

马黑黑 发表于 2024-9-12 22:10

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

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

花飞飞 发表于 2024-9-12 22:48

我的天，这虚线真好看{:4_173:}

马黑黑 发表于 2024-9-12 23:13

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

可以一看吧

起个网名好难 发表于 2024-9-13 06:09

本帖最后由 起个网名好难 于 2024-9-13 07:23 编辑

马黑黑 发表于 2024-9-12 20:26
动画中 to="283" 算式里，283 的得来依据勾股定理。
2√2
或许 300 好些，（下一个在最大内切圆时出现）

起个网名好难 发表于 2024-9-13 07:33

本帖最后由 起个网名好难 于 2024-9-13 09:22 编辑 <br /><br /><!--svg width="600" height="600" viewBox="0 0 600 600"style="border:thin dotted red;">
        <circle cx="300" cy="300" r="0" fill="none" stroke="purple" stroke-width="4" stroke-dasharray="4 18">
                <animate id="a1" attributeName="r" from="0" to="900" dur="15s" repeatCount="indefinite" />
        </circle>
        <circle cx="300" cy="300" r="0" fill="none" stroke="olive" stroke-width="4" stroke-dasharray="4 18">
                <animate id="a2" attributeName="r" from="0" to="900" dur="15s" repeatCount="indefinite" begin="a1.begin+5s" />
        </circle>
        <circle cx="300" cy="300" r="0" fill="none" stroke="skyblue" stroke-width="4" stroke-dasharray="4 18">
                <animate id="a3" attributeName="r" from="0" to="900" dur="15s" repeatCount="indefinite" begin="a1.begin+10s" />
        </circle>
</svg-->

马黑黑 发表于 2024-9-13 07:43

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

不错的主意
页: [1] 2 3
查看完整版本: 猜猜这个是不是在转