公众号svg排版，跳动的留言板

跳动的留言版，效果如下：图片有点大（10m吧？），请耐心等待

原文在这里👉震震震震震震整只手机都在震🤣

代码在这：

<svg xmlns="http://www.w3.org/2000/svg" width="750px" height="50">

    <animate attributename="height" begin="0s" dur="0.5s" restart="whenNotActive" values="10;50;10" repeatcount="indefinite" calcmode="discrete"></animate>

</svg>

解释下这段代码：

width="750px" height="50"：这是画布的大小，不是很重要

begin="0s"：这是开始时间，“0”即为进来就“动”；也可以改成其他数值，即n秒后“动”；也可以把“0s”改成“click”，即为点击后“动”，效果在底部。

dur="0.5s"：结束于0.5s后

values="10;50;10"：“动”的幅度，可以随意增删，如"10;50;100;50;10"（注意要用英文键盘输入，否则无效）

repeatcount="indefinite"：无限重复，把indefinite改成数值1234的话，即为重复n次。

calcmode="discrete"：跳动。把discrete改成paced即为匀速运动，效果在底部。

代码怎么使用？

很简单，复制后粘贴到135编辑器（代码模式）

然后再切换回编辑模式

点击【后面插入段落】就可以看到效果了。

懂我意思吧？

详情请阅读👉推动留言板代码｜《消灭酸臭味》的教程＋模板

下面是我修改后的代码：（修改代码请用英文键盘输入，否则无效）

<svg xmlns="http://www.w3.org/2000/svg" width="750px" height="100">

    <animate attributename="height" begin="click" dur="5s" restart="whenNotActive" values="10;50;100;0" repeatcount="7" calcmode="paced"></animate>

</svg>

代码分析：点击（"click"）下面空白处（画布）开始“动”，"5s"完成运动幅度为"10;50;100;0"的过程，过程重复"7"次，运动方式为匀速（"paced"）

效果请点击这里👉跳动的留言版