马黑黑 发表于 2025-9-7 20:26

爱的故事

<div class="codebox" data-prev="1">
&lt;div class="codebox" data-prev="1"&gt;
&lt;style&gt;
        .path1 {
                fill: pink;
                stroke: pink;
                stroke-width: 6;
                stroke-dasharray: 8 8;
                stroke-dashoffset: 64;
                cursor: pointer;
                animation: move 1s linear infinite var(--state), jump 0.25s infinite alternate var(--state);
                --state: running;
        }
        @keyframes move {
                to { stroke-dashoffset: 0; }
        }
        @keyframes jump {
                to { transform: scale(0.98); }
        }
&lt;/style&gt;

&lt;svg id="msvg" width="300" height="300" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"&gt;
        &lt;path d="M0 190 C-200 20,-300 -320,0 -100 C300 -320,200 20,0 190" class="path1" /&gt;
&lt;/svg&gt;
&lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=569587107" loop autoplay&gt;&lt;/audio&gt;

&lt;script&gt;
        var player = document.querySelector('.path1');
        player.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
        aud.onplaying = aud.onpause = () =&gt; player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

红影 发表于 2025-9-7 21:22

完成了虚线的移动和大小变化两个动作。
这个心形还是svg绘制的，漂亮{:4_187:}

红影 发表于 2025-9-7 21:24

stroke-dashoffset: 64; 不知这个64从哪来的，记得可以测出路线长度的，那个命令是什么忘记了{:4_173:}

马黑黑 发表于 2025-9-7 21:26

红影 发表于 2025-9-7 21:24
stroke-dashoffset: 64; 不知这个64从哪来的，记得可以测出路线长度的，那个命令是什么忘记了

虚线偏移不用测量路径长度。64是 虚线长度+虚线间隔的倍数。

马黑黑 发表于 2025-9-7 21:27

红影 发表于 2025-9-7 21:22
完成了虚线的移动和大小变化两个动作。
这个心形还是svg绘制的，漂亮

天热多喝水{:4_190:}

杨帆 发表于 2025-9-7 22:07

漂亮，谢谢马老师精彩分享{:4_191:}

红影 发表于 2025-9-7 22:35

马黑黑 发表于 2025-9-7 21:26
虚线偏移不用测量路径长度。64是 虚线长度+虚线间隔的倍数。

这样也可以啊，只要是 虚线长度+虚线间隔的倍数 就可以了？

红影 发表于 2025-9-7 22:36

马黑黑 发表于 2025-9-7 21:27
天热多喝水

这个大小变化带来跳动的心灵{:4_187:}

马黑黑 发表于 2025-9-7 22:48

红影 发表于 2025-9-7 22:36
这个大小变化带来跳动的心灵

心大心小都是心

马黑黑 发表于 2025-9-7 22:49

红影 发表于 2025-9-7 22:35
这样也可以啊，只要是 虚线长度+虚线间隔的倍数 就可以了？

理论上就是酱紫，一般就不会出现顿一下的现象

马黑黑 发表于 2025-9-7 22:49

杨帆 发表于 2025-9-7 22:07
漂亮，谢谢马老师精彩分享

{:4_190:}

红影 发表于 2025-9-8 22:53

马黑黑 发表于 2025-9-7 22:48
心大心小都是心

所以在大小间跳动也正常。

红影 发表于 2025-9-8 22:54

马黑黑 发表于 2025-9-7 22:49
理论上就是酱紫，一般就不会出现顿一下的现象

原来顿一下是不成比例造成的。

马黑黑 发表于 2025-9-9 07:59

红影 发表于 2025-9-8 22:54
原来顿一下是不成比例造成的。

对的

马黑黑 发表于 2025-9-9 08:00

红影 发表于 2025-9-8 22:53
所以在大小间跳动也正常。

酱紫错落有致

红影 发表于 2025-9-9 21:38

马黑黑 发表于 2025-9-9 07:59
对的

所以百分比不一定比计算好的间距好。

红影 发表于 2025-9-9 21:38

马黑黑 发表于 2025-9-9 08:00
酱紫错落有致

是的，很漂亮呢{:4_187:}

马黑黑 发表于 2025-9-9 21:39

红影 发表于 2025-9-9 21:38
是的，很漂亮呢

还好

马黑黑 发表于 2025-9-9 21:39

红影 发表于 2025-9-9 21:38
所以百分比不一定比计算好的间距好。

差不多

红影 发表于 2025-9-10 12:23

马黑黑 发表于 2025-9-9 21:39
还好

这样设计比较突出{:4_187:}
页: [1] 2
查看完整版本: 爱的故事